HTML Basics

HTML (Hypertext Markup Language)

• A standard markup language used to create web pages
• Consists of a series of elements represented by tags (<>)
• Tags usually come in pairs, with the opening tag preceding the content and the closing tag following the content

Basic HTML Structure

• ``: declaration of document type
• ``: root element of the document
• ``: contains metadata about the document
• ``: contains the content of the HTML document

HTML Elements

• Headings: h1, h2, h3, etc. for headings
• Paragraphs: p for paragraphs of text
• Links: a for hyperlinks
• Images: img for adding images
• Lists: ul, ol, and li for unordered, ordered, and list items respectively
• Tables: table, tr, and td for tables, table rows, and table data respectively

CSS (Cascading Style Sheets)

• A styling language used to control the layout and appearance of web pages
• Consists of rules, known as styles, that are applied to HTML elements

CSS Syntax

• A CSS rule consists of a selector, a property, and a value
• Example: p { color: blue; } sets the text color of paragraphs to blue

CSS Selectors

• Element Selectors: p, h1, img, etc. select HTML elements
• Class Selectors: .classname selects elements with a specific class
• ID Selectors: #idname selects an element with a specific ID

CSS Properties

• Color and Background: color, background-color, background-image, etc.
• Text: font-family, font-size, text-align, etc.
• Box Model: width, height, margin, padding, etc.
• Layout: display, float, position, etc.

HTML (Hypertext Markup Language)

• A standard markup language used to create web pages, consisting of a series of elements represented by tags.
• Tags usually come in pairs, with the opening tag preceding the content and the closing tag following the content.

Basic HTML Structure

• The document type is declared using ``.
• The root element of the document is represented by ``.
• The `` element contains metadata about the document.
• The `` element contains the content of the HTML document.

HTML Elements

• Headings are represented by h1, h2, h3, etc.
• Paragraphs of text are represented by p.
• Hyperlinks are represented by a.
• Images are added using img.
• Unordered lists, ordered lists, and list items are represented by ul, ol, and li respectively.
• Tables are created using table, tr, and td for tables, table rows, and table data respectively.

CSS (Cascading Style Sheets)

• A styling language used to control the layout and appearance of web pages, consisting of rules known as styles that are applied to HTML elements.

CSS Syntax

• A CSS rule consists of a selector, a property, and a value.
• Example: p { color: blue; } sets the text color of paragraphs to blue.

CSS Selectors

• Element selectors such as p, h1, img, etc. select HTML elements.
• Class selectors such as .classname select elements with a specific class.
• ID selectors such as #idname select an element with a specific ID.

CSS Properties

• Color and background properties include color, background-color, background-image, etc.
• Text properties include font-family, font-size, text-align, etc.
• Box model properties include width, height, margin, padding, etc.
• Layout properties include display, float, position, etc.

Web Fundamentals

• The web is a system of interlinked hypertext documents, accessible via the Internet.

Key Components

• HTML (Hypertext Markup Language) is a markup language used to create web pages.
• CSS (Cascading Style Sheets) is a styling language used to control the layout and appearance of web pages.
• JavaScript is a programming language used to add interactivity to web pages.
• HTTP (Hypertext Transfer Protocol) is a protocol used for transferring data over the web.

Web Architecture

• The client-server architecture is a model where clients (web browsers) request resources from servers, which respond with the requested data.
• The request-response cycle is a cycle where a client sends a request to a server, and the server responds with the requested data.

Web Page Structure

• Elements are individual components of a web page, such as headings, paragraphs, images, and links.
• Tags are HTML codes used to define elements.
• Semantic meaning is the meaning of an element, such as a heading or paragraph, which is conveyed by its tag.

Web Development

• Front-end development is the development of the client-side of a web application, using HTML, CSS, and JavaScript.
• Back-end development is the development of the server-side of a web application, using programming languages such as Python, Ruby, or PHP.
• Full-stack development is the development of both the front-end and back-end of a web application.

Web Browsers

• Popular web browsers include Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, and Opera.
• Browser rendering is the process of interpreting and displaying HTML, CSS, and JavaScript code in a web page.

Internet and Web

• The internet is a global network of interconnected computers and servers.
• The web is a system of interlinked hypertext documents, accessible via the internet.