Note-⚠️: Some HTML elements have no content (like the <br> element). These elements are called empty elements. Empty elements do not have an end tag!
⚛Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:⬇️
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document:⬇️
❤1
⚛HTML Page Structure
Below is a visualization of an HTML page structure:⬇️
Below is a visualization of an HTML page structure:⬇️
👍2
Note-⚠️: The content inside the <body> section (the white area above) will be displayed in a browser. The content inside the <noscript> element will be shown in the browser's noscript bar or in the page's tab.
👍5
HTML History
Since the early days of the World Wide Web, there have been many versions of HTML:⬇️
Since the early days of the World Wide Web, there have been many versions of HTML:⬇️
⚛1989 Tim Berners-Lee invented www
⚛1991 Tim Berners-Lee invented HTML
⚛1993 Dave Raggett drafted HTML+
⚛1995 HTML Working Group defined HTML 2.0
⚛1997 W3C Recommendation: HTML 3.2
⚛1999 W3C Recommendation: HTML 4.01
⚛2000 W3C Recommendation: XHTML 1.0
⚛2008 WHATWG HTML5 First Public Draft
⚛2012 WHATWG HTML5 Living Standard
⚛2014 W3C Recommendation: HTML5
⚛2016 W3C Candidate Recommendation: HTML 5.1
⚛2017 W3C Recommendation: HTML5.1 2nd Edition
⚛2017 W3C Recommendation: HTML5.2
⚛1991 Tim Berners-Lee invented HTML
⚛1993 Dave Raggett drafted HTML+
⚛1995 HTML Working Group defined HTML 2.0
⚛1997 W3C Recommendation: HTML 3.2
⚛1999 W3C Recommendation: HTML 4.01
⚛2000 W3C Recommendation: XHTML 1.0
⚛2008 WHATWG HTML5 First Public Draft
⚛2012 WHATWG HTML5 Living Standard
⚛2014 W3C Recommendation: HTML5
⚛2016 W3C Candidate Recommendation: HTML 5.1
⚛2017 W3C Recommendation: HTML5.1 2nd Edition
⚛2017 W3C Recommendation: HTML5.2
❤3👍2
Learn HTML Using Notepad or TextEdit
⚛Web pages can be created and modified by using professional HTML editors.
⚛However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
⚛We believe that using a simple text editor is a good way to learn HTML.
⚠️Follow the steps below to create your first web page with Notepad or TextEdit.⬇️
⚛Web pages can be created and modified by using professional HTML editors.
⚛However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).
⚛We believe that using a simple text editor is a good way to learn HTML.
⚠️Follow the steps below to create your first web page with Notepad or TextEdit.⬇️
❤2
⚠️-Step 1: Open Notepad (PC)
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.
Windows 7 or earlier:
Open Start > Programs > Accessories > Notepad
❤1
⚠️-Step 1: Open TextEdit (Mac)
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".
Then open a new document to place the code.
Open Finder > Applications > TextEdit
Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"
Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".
Then open a new document to place the code.
❤1👍1
⚠️-Step 2: Write Some HTML
Write or copy the following HTML code into Notepad:⬇️
Write or copy the following HTML code into Notepad:⬇️
❤1👍1
⚠️-Step 3: Save the HTML Page
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).⬇️
Save the file on your computer. Select File > Save as in the Notepad menu.
Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).⬇️
👍2
⚠️-Tip: You can use either .htm or .html as file extension. There is no difference; it is up to you.
⚠️-Step 4: View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
The result will look much like this:⬇️
Open the saved HTML file in your favorite browser (double click on the file, or right-click - and choose "Open with").
The result will look much like this:⬇️
⚛HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:⬇️
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width, and height are provided as attributes:⬇️
⚠️-HTML Basic Examples
⚛In this chapter we will show some basic HTML examples.
⚛Don't worry if we use tags you have not learned about yet.
⚛In this chapter we will show some basic HTML examples.
⚛Don't worry if we use tags you have not learned about yet.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="Exp.jpg" alt="SiteExp.com" width="104" height="142">
</body>
</html>
.......................................Result⬇️
<html>
<body>
<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>
<img src="Exp.jpg" alt="SiteExp.com" width="104" height="142">
</body>
</html>
.......................................Result⬇️