HTML is the standard markup language for Web pages.
With HTML you can create your own Website.
HTML is easy to learn - You will enjoy it!
HTML stands for Hyper Text Markup Language
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.
Here are the basic tags of html:
Doctype:
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.<!DOCTYPE html>Headings:
HTML headings are defined with the
<h1>to<h6>tags.<h1>defines the most important heading.<h6>defines the least important heading.<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3>Paragraphs:
HTML paragraphs are defined with the
<p>tag.<p>This is a paragraph.</p> <p>This is another paragraph.</p>Links:
HTML links are defined with the
<a>tag.The link's destination is specified in the
hrefattribute.Attributes are used to provide additional information about HTML elements.
<a href="https://www.w3schools.com">This is a link</a>Images:
HTML images are defined with the
<img>tag.The source file (
src), alternative text (alt),width, andheightare provided as attributes.<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">Empty Elements:
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 And Body:
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>.<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>Bold Text:
The HTML
<b>element defines bold text, without any extra importance.<b>This text is bold</b>Strong Text:
The HTML
<strong>element defines text with strong importance. The content inside is typically displayed in bold.<strong>This text is important!</strong>Small and Mark:
The HTML
<small>element defines smaller text.The HTML
<mark>element defines text that should be marked or highlighted.<small>This is some smaller text.</small> <p>Do not forget to buy <mark>milk</mark> today.</p>del Element:
The HTML
<del>element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text.<p>My favorite color is <del>blue</del> red.</p>Sub Element:
The HTML
<sub>element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O.<p>This is <sub>subscripted</sub> text.</p>Border Color:
You can set the color of the borders.
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>Color Values:
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values.
The following three <div> elements have their background color set with RGB, HEX, and HSL values.
a)rgb(255, 99, 71)
b)#ff6347
c)hsl(9, 100%, 64%)
<h1 style="background-color:rgb(255, 99, 71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>Page Title:
Every web page should have a page title to describe the meaning of the page.
The
<title>element adds a title to your page.<!DOCTYPE html> <html> <head> <title>HTML Tutorial</title> </head> <body> The content of the document...... </body> </html>Tables:
A table in HTML consists of table cells inside rows and columns.
HTML tables allow web developers to arrange data into rows and columns.
<table> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> </tr> <tr> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> </tr> </table>Tables Cells:
Each table cell is defined by a
<td>and a</td>tag.tdstands for table data.Everything between
<td>and</td>are the content of the table cell.<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> </table>Tables Rows:
Each table row starts with a
<tr>and ends with a</tr>tag.trstands for table row.<table> <tr> <td>Emil</td> <td>Tobias</td> <td>Linus</td> </tr> <tr> <td>16</td> <td>14</td> <td>10</td> </tr> </table>Tables Headers:
Sometimes you want your cells to be table header cells. In those cases use the <th> tag instead of the <td> tag:
th stands for table header.
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
<th>Person 3</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
<td>Linus</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
<td>10</td>
</tr>
</table>
- Tables Border:
HTML tables can have borders of different styles and shapes.
When you add a border to a table, you also add borders around each table cell.
table, th, td { border: 1px solid black; }- Collapsed Border:
To avoid having double borders like in the example above, set the CSS border-collapse property to collapse.
This will make the borders collapse into a single border.
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
- Style Type Border:
If you set a background color for each cell, and give the border a white color (the same as the document background), you get the impression of an invisible border.
table, th, td {
border: 1px solid white;
border-collapse: collapse;
}
th, td {
background-color: #96D4D4;
}
- Round Tables Border:
With the border-radius property, the borders get rounded corners.
table, th, td {
border: 1px solid black;
border-radius: 10px;
}
- Width and Height:
To set the width of a table, add the style attribute to the <table> element.
To set the height of a specific row, add the style attribute on a table row element.
<table style="width:100%">
<tr>
<th style="width:70%" height="40%">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>
- Tables Headers:
HTML tables can have headers for each column or row, or for many columns/rows. Table headers are defined with th elements. Each th element represents a table cell.
<table>
<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>
- Lists:
HTML lists allow web developers to group a set of related items in lists.
<li></li>
- Unordered List and Ordered List:
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default.
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default.
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
- Description Lists:
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
- Block and Inline Elements:
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p> and <div>.
The <p> element defines a paragraph in an HTML document.
The <div> element defines a division or a section in an HTML document.
The <p> element is a block-level element.
The <div> element is a block-level element.
<p>Hello World</p>
<div>Hello World</div>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
- Inline Elements:
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is an <span> element inside a paragraph.
<span>Hello World</span>
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
- Classes:
The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.
In the following example we have three <div> elements with a class attribute with the value of "city". All of the three <div> elements will be styled equally according to the .city style definition in the head section.
<!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>
- Id:
The id attribute specifies a unique id for an HTML element. The value of the id attribute must be unique within the HTML document.
The id attribute is used to point to a specific style declaration in a style sheet. It is also used by JavaScript to access and manipulate the element with the specific id.
The syntax for id is: write a hash character (#), followed by an id name. Then, define the CSS properties within curly braces {}.
In the following example, we have an <h1> element that points to the id name "header". This <h1> element will be styled according to the #myHeader style definition in the head section.
<!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>
- Iframes:
An HTML iframe is used to display a 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.
<iframe src="url" title="description"></iframe>
SEMANTIC ELEMENTS:
What are Semantic Elements?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Section:
The
<section>element defines a section in a document.According to W3C's HTML documentation: "A section is a thematic grouping of content, typically with a heading."
Examples of where an
<section>element can be used.<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section> <section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>Article:
The
<article>element specifies independent, self-contained content.An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
Examples of where the
<article>element can be used.<!DOCTYPE html> <html> <body> <h1>The article element</h1> <article> <h2>Google Chrome</h2> <p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p> </article> <article> <h2>Mozilla Firefox</h2> <p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p> </article> <article> <h2>Microsoft Edge</h2> <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p> </article> </body> </html>Footer:
The
<footer>element defines a footer for a document or section.A
<footer>element typically contains:authorship information
copyright information
contact information
sitemap
back to top links
related documents
You can have several <footer> elements in one document.
<footer>
<p>Author: Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
Navigation:
he
<nav>element defines a set of navigation links.<nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav>Aside:
The
<aside>element defines some content aside from the content it is placed in (like a sidebar).The
<aside>content should be indirectly related to the surrounding content.<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p> <aside> <h4>Epcot Center</h4> <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p> </aside>Figure and figcaption:
The
<figure>tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.The
<figcaption>tag defines a caption for a<figure>element. The<figcaption>element can be placed as the first or as the last child of an<figure>element.The
<img>element defines the actual image/illustration.<figure> <img src="pic_trulli.jpg" alt="Trulli"> <figcaption>Fig1. - Trulli, Puglia, Italy.</figcaption> </figure>