HTML is the standard markup language where you can create your own Website.

Course Content

31 sections • 31 lectures • 05h 15m total length

	HTML Basic All HTML documents must start with a document type declaration: `<!DOCTYPE html>`. The HTML document itself begins with `<html>` and ends with `</html>`. The visible part of the HTML document is between `<body>` and `</body>`. The <!DOCTYPE> Declaration The `<!DOCTYPE>` declaration represents the document type, and helps browsers to display web pages correctly. It must only appear once, at the top of the page (before any HTML tags). The `<!DOCTYPE>` declaration is not case sensitive. HTML Headings HTML headings are defined with the `<h1>` to `<h6>` tags. HTML Paragraphs HTML paragraphs are defined with the `<p>` tag: HTML Links HTML links are defined with the `<a>` tag: HTML Images HTML images are defined with the `<img>` tag. The source file (`src`), alternative text (`alt`), `width`, and `height` are provided as attributes:		min

	The <!DOCTYPE> declaration. Declaring a DOCTYPE All HTML need to have a DOCTYPE declared. The DOCTYPE is not actually an element or HTML tag. It lets the browser know how the document should be interpreted, by indicating what version or standard of HTML (or other markup language) is being used.		10min

	source code editor Notepad++ is a text and source code editor for use with Microsoft Windows. It supports tabbed editing, which allows working with multiple open files in a single window. The project's name comes from the C increment operator. Notepad++ is distributed as free software.		10min

	HTML headings <h1> to <h6> The <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> elements are used to create headings in descending order of importance where <h1> is the most important and <h6> the least.		10min

	HTML paragraphs <p> The <p> HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content,		10min

	HTML links - <a> tag: The link's destination is specified in the `href` attribute. Attributes are used to provide additional information about HTML elements.	preview	10min

	<img> tag The source file (`src`), alternative text (`alt`), `width`, and `height` are provided as attributes:	preview	10min

	<tagname>Content goes here...</tagname> <!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html> The `<html>` element is the root element and it defines the whole HTML document. It has a start tag `<html>` and an end tag `</html>`. Then, inside the `<html>` element there is a `<body>` element: The `<body>` element defines the document's body.It has a start tag `<body>` and an end tag `</body>`.Then, inside the `<body>` element there are two other elements: `<h1>` and `<p>`: HTML elements with no content are called empty elements.The `<br>` tag defines a line break, and is an empty element without a closing tag <p>This is a <br> paragraph with a line break.</p> HTML tags are not case sensitive: `<P>` means the same as `<p>`.	preview	10min

	additional information about HTML elements All HTML elements can have attributes Attributes provide additional information about elements Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value"		10min

	<a> tag defines a hyperlink	preview	10min

	src attribute The `<img>` tag is used to embed an image in an HTML page. The `src` attribute specifies the path to the image to be displayed:	preview	10min

	style attribute The `style` attribute is used to add styles to an element, such as color, font, size, and more.	preview	min

	always include the lang attribute You should always include the `lang` attribute inside the `<html>` tag, to declare the language of the Web page. This is meant to assist search engines and browsers. The following example specifies English as the language: <!DOCTYPE html> <html lang="en"> <body> ... </body> </html>	preview	min

	displayed as a tooltip The `title` attribute defines some extra information about an element. The value of the title attribute will be displayed as a tooltip when you mouse over the element: <p title="I'm a tooltip">This is a paragraph.</p>	preview	10min

	opening tag and the second tag is called the closing tag. HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. ... An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. <!DOCTYPE html> <html lang="en"> <head> <title>Title of the document</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>	preview	min

	defining text with a special meaning HTML contains several elements for defining text with a special meaning. `<b>` - Bold text `<strong>` - Important text `<i>` - Italic text `<em>` - Emphasized text `<mark>` - Marked text `<small>` - Smaller text `<del>` - Deleted text `<ins>` - Inserted text `<sub>` - Subscript text `<sup>` - Superscript text <b>This text is bold</b> <strong>This text is important!</strong> <i>This text is italic</i> <em>This text is emphasized</em>	preview	15min

	Quotation and Citation Elements In this chapter we will go through the `<blockquote>`,`<q>`, `<abbr>`, `<address>`, `<cite>`, and `<bdo>` HTML elements.	preview	15min

	comments are not displayed in the browser Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:	preview	min

	Color Names HTML colors are specified with predefined color names, or with RGB, HEX, HSL, RGBA, or HSLA values. <h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p> <h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>	preview	min

	Cascading Style Sheets. CSS stands for Cascading Style Sheets. CSS saves a lot of work. It can control the layout of multiple web pages all at once.	preview	15min

	<table> tag HTML tables allow web developers to arrange data into rows and columns <table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>	preview	15min

	<li> tag. HTML lists allow web developers to group a set of related items in lists. An unordered HTML list: Item Item Item Item An ordered HTML list: First item Second item Third item Fourth item	preview	15min

	Block and Inline A block-level element always starts on a new line.A block-level element always takes up the full width available (stretches out to the left and right as far as it can). A block level element has a top and a bottom margin, whereas an inline element does not <address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>	preview	15min

	<div> & <span> The `<div>` element is often used as a container for other HTML elements.The `<div>` element has no required attributes, but `style`, `class` and `id` are common.When used together with CSS, the `<div>` element can be used to style blocks of content: The `<span>` element is an inline container used to mark up a part of a text, or a part of a document.The `<span>` element has no required attributes, but `style`, `class` and `id` are common.When used together with CSS, the `<span>` element can be used to style parts of the text:	preview	15min

	Introduction to Script Tag. The <script> HTML element is used to embed executable code or data; this is typically used to embed or refer to JavaScript code.	preview	15min

	Class and ID <!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; border: 2px solid black; margin: 20px; padding: 20px; } </style> </head> <body> <div class="city"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html> <!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body> <h1 id="myHeader">My Header</h1> </body> </html>	preview	15min

	web page within a web page. The HTML `<iframe>` tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.	preview	15min

	Collect user input. An HTML form is used to collect user input. The user input is most often sent to a server for processing.	preview	20min

	<audio> element <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio>	preview	5min

	<video> element <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video>	preview	15min

	Responsive Web Page Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)	preview	15min

Requirements

Computer

Description

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.