- HyperText Markup Language
- It is not a programming language.
- 100% of websites use HTML
HTML is the structure behind every website on the internet.
It’s the backbone behind every website. We layer code on top of HTML, but without HTML, there is no website.
The first thing you should learn in web development is HTML.
You will often see “HTML5.” Consider HTML and HTML5 to be the same thing these days.
HTML5 is the fifth iteration of HTML, and there will not be an HTML6, so consider HTML and HTML5 to be the same thing.
<element title="Second attr here">
Some text in here
</element>**<p>a paragraph where you can write lots of text in here</p>**<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>
Hello World with proper structure!
</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
**<title>Hello my name is Shadow</title>**
</head>
<body>
<p>Hello, welcome to my basic website, with a proper HTML structure.</p>
</body>
</html>An HTML attribute is a piece of markup language used to adjust the behavior or display of an HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Attributes</title>
</head>
<body>
**<p title="It's going to be evening soon!">This is an Attribute</p>**
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Heading</title>
</head>
<body>
**<h1>H1 is the biggest header</h1>
<h2>H2 is this size</h2>
<h3>H3 is this size</h3>
<h4>H4 is this size</h4>
<h5>H5 is this size</h5>
<h6>H6 is the smallest header</h6>**
<p>
Some regular text in here.
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Line Breaks</title>
</head>
<body>
<p>
I am on line 1 <br>
I am on line 2 <br/>
I am on line 3 <br/>
I am on line 4 <br/>
</p>
<p>
<hr>
The space between here | |
</p>
</body>
</html><strong>: The Strong Importance element. The <strong> HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bold & Strong</title>
</head>
<body>
<p>
**<b>Lorem ipsum dolor sit amet consectetur adipisicing elit.</b>**
**<strong>Iure reprehenderit necessitatibus, deleniti quia beatae unde error</strong>**
</p>
</body>
</html>The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Italic and Emphasis</title>
</head>
<body>
Regular Text<br>
**<i>Italic</i>**<br/>
**<em>Emphasis</em>**
<p><em><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</strong></em> Obcaecati recusandae, veniam possimus natus enim animi.</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Underline</title>
</head>
<body>
<p>
This is a regular text <br>
<b>This is a Bold text</b> <br/>
<strong>This is a Strong text</strong> <br/>
<i>This is an Italic text</i> <br/>
<em>This is an Emphasis text</em> <br/>
**<u>This is an Underline text</u>** <br/>
<br/>
<b><strong><i><em><u>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quia eius molestiae id corporis eligendi? Eligendi?</u></em></i></strong></b>
</p>
</body>
</html>In the HTML code comments look like a special HTML element that won’t show up when your page is rendered
Careful: Code comments will still appear in your source code. They are not 100% hidden.
<!doctype html>
<html>
<head>
<title>Comments</title>
</head>
<body>
<!-- START BLOG POST -->
<h1>Welcome to my first web page</h1>
<p>Hello, thank you for joining me in this web viewing experience.</p>
<p>
<!-- When you learn how to add a link, link to my Twitter profile -->
Feel free to contact me at twitter.com/@KalobTaulien
</p>
<!-- END BLOG POST -->
<h1>Welcome to my 2nd web page</h1>
<p>Hello, thank you for joining me in this web viewing experience.</p>
<p>
<!-- When you learn how to add a link, link to my Twitter profile -->
Feel free to contact me at twitter.com/@KalobTaulien
</p>
<!-- START BLOG POST -->
<h1>Welcome to my 3rd web page</h1>
<p>Hello, thank you for joining me in this web viewing experience.</p>
<p>
<!-- When you learn how to add a link, link to my Twitter profile -->
Feel free to contact me at twitter.com/@KalobTaulien
</p>
<!-- END BLOG POST -->
<h1>Welcome to my 4rth web page</h1>
<p>Hello, thank you for joining me in this web viewing experience.</p>
<p>
<!-- When you learn how to add a link, link to my Twitter profile -->
Feel free to contact me at twitter.com/@KalobTaulien
</p>
</body>
</html>In HTML, the "target" attribute is used to specify where the linked document should open when a user clicks on a link.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Links Tutorial</title>
</head>
<body>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Est, atque, sunt eos incidunt dolorum voluptas, quae pariatur dolores in dolor adipisci repellendus libero obcaecati deserunt. Veritatis sit voluptates optio itaque.</p>
<!-- It redirects you to a different page in the same tab -->
**<a href="https://codingforeverybody.com/">Click here to learn more....</a>** <br>
<!-- It redirects you to a new tab of the page -->
**<a href="https://codingforeverybody.com/" target="_blank">Click here to learn more....</a>** <br />
</body>
</html>Internal links - are hyperlinks that point from one page on a domain to a different page on the same domain.
In other words, internal links connect pages on the same website, meaning that the source and target domain are the same.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal links</title>
</head>
<body>
<a href="#bottom">Click here to skip all the way to the bottom of tha page</a> <br>
<a href="#middle">Click here to skip all the way to the middle of tha page</a>
<p id="top">Top</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p id="middle">Middle</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p>|</p>
<p id="bottom">Bottom</p>
<a href="#top">Click here to go back to the top of the page</a>
</body>
</html>Relative URLs don’t contain full web address. With relative URL we start automatically from the address the browser
currently at then we add path components and then extension. Explicitly tells the browser to use the current folder.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Relative Link 1</title>
</head>
<body>
<h1>Page #1</h1>
<h2>Welcome to my homepage</h2>
<a href="relative-link-2.html">Click here to go to the about page section</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Relative Link 2</title>
</head>
<body>
<h1>Page #2</h1>
<h2>Welcome to my about page section</h2>
<a href="relative-link-1.html">Click here to go back to the homepage section</a>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<title>Images</title>
</head>
<body>
<h1>Welcome to my first image</h1>
<img src="https://placehold.co/600x400/orange/white" alt="Did I break something?" title="my first image" width="300" height="700">
<img src="../../../../image file/orange.jpeg" alt="Did I break something?" title="My 2nd Image" width="600" height="400">
<img src="//placehold.co/600x400/orange/whit" alt="Did I break something?" title="my broken image" width="300" height="700">
</body>
</html>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).
They do not force the text after them to a new line. An anchor (or link) is an example of an inline element. You can put several links in a row, and they will display in a line.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Block & Inline elements</title>
<link rel="stylesheet" href="/Lessons/CSS/block-and-inline-elements.css">
</head>
<body>
<!-- BLOCK ELEMENTS -->
<p style="border: 1px solid red;">This is a paragraph</p> <h1 style="border: 1px solid red;">This is a heading tag <a href="images.html" style="border: 1px solid red;">this is a link</a></h1>
<!-- INLINE ELEMENTS -->
<span style="border: 1px solid red;">span #1</span> <span style="border: 1px solid red;">span #2</span> <span style="border: 1px solid red;">span #3</span>
<a href="images.html" style="border: 1px solid red;">this is a link</a>
</body>
</html>The tag defines a division or a section in an HTML document. The tag is used as a container for ## HTML elements - which is then styled with CSS or manipulated with JavaScript.
tag is used as a container for ## HTML elements - which is then styled with CSS or manipulated with JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Div element</title>
</head>
<body>
<div style="border: 1px solid red;">
Div #1
</div>
<span style="border: 1px solid red;">
span #1
</span>
<span style="border: 1px solid red;">
span #2
</span>
<div style="border: 1px solid red;">
Div #2
</div>
<span style="border: 1px solid red;">
span #1
</span>
<span style="border: 1px solid red;">
span #2
</span>
<span style="border: 1px solid red;">
span #3
</span>
</body>
</html>It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>), or a menu (<menu>). In
<!DOCTYPE html>
<html lang="en">
<head>
<title>List Items</title>
</head>
<body>
<h1>Unordered list</h1>
<ul>
<li>List Number #1</li>
<li>List Number #2</li>
<li>List Number #3</li>
</ul>
<h1>Ordered List</h1>
<ol>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ol>
</body>
</html>The <table> HTML element represents tabular data—that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.
The <tr> HTML element defines a row of cells in a table. The
row's cells can then be established using a mix of <td> (data
cell) and <th> (header cell) elements.
The <td> HTML element defines a cell of a table that contains data and may be used as a child of the <tr> element.
Contains a non-negative integer value that indicates how many columns the data cell spans or extends. The default value is 1. User agents dismiss values higher than 1000 as incorrect, setting to the default value (1).
Contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that provide headings for this table cell.
Contains a non-negative integer value that indicates for how many rows the data cell spans or extends. The default value is 1; if its value is set to 0, it extends until the end of the table grouping section (<thead>, <tbody>, <tfoot>, even if implicitly defined), that the cell belongs to.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">Row 1</td>
<td>Row 3</td>
<td>Row 4</td>
</tr>
<tr>
<td rowspan="2">Row 5</td>
<td>Row 6</td>
<td colspan="2" rowspan="2">Row 7</td>
</tr>
<tr>
<td>Row 10</td>
<td>Row 12</td>
</tr>
<tr>
<td>Row 13</td>
<td>Row 14</td>
<td>Row 15</td>
<td>Row 16</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>foot 1</td>
<td>foor 2</td>
<td>foot 3</td>
<td>foot 4</td>
</tr>
</tfoot>
</table>
</body>
</html>
<doctype html>
<html>
<head>
<title></title>
</head>
<body>
<br />
<hr />
<img />
</body>
</html>Inline CSS is the technique to define the single element with the insert style sheets in an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS</title>
</head>
<body>
<div style="border: 1px solid red; background-color: #6595ed;">
This is a div
</div>
<div style="border: 1px solid red; background-color: #469138;">
This is a second div
</div>
</body>
</html>An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the section of an HTML page, within a <style> element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Internal CSS</title>
<style>
h1 {
font-size: 90px;
}
body {
background-color: #6595ed;
}
div {
background-color: #3ab790;
}
.orange {
background-color: #ea8314;
}
#violet {
background-color: #ea66ec;
}
</style>
</head>
<body>
<h1>
Inline CSS
</h1>
<div class="orange">
Div #1
</div>
<div id="violet">
Div #2
</div>
<div>
Div #3
</div>
</body>
</html>