1.
HTML
What is HTML?
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!
What is HTML?
• 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.
A Simple HTML Document
The <!DOCTYPE html> declaration defines that
<!DOCTYPE html> this document is an HTML5 document
<html> The <html> element is the root element of an
<head> HTML page
<title>Page Title</title> The <head> element contains meta information
</head> about the HTML page
<body>
The <title> element specifies a title for
the HTML page (which is shown in the
<h1>My First Heading</h1> browser's title bar or in the page's tab)
<p>My first paragraph.</p>
The <body> element defines the document's
body, and is a container for all the visible
</body>
contents, such as headings, paragraphs,
</html>
images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
Try It Yourself
What is an HTML Element?
An HTML element is defined by a start tag, some content,
and an end tag:
<tagname> Content goes here... </tagname>
The HTML element is everything from the start tag to
the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
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:
HTML Page Structure
Below is a visualization of an HTML page structure:
Note:
The content inside the
<body> section (the
white area above) will be
displayed in a browser.
The content inside the
<title> element will be
shown in the browser's
title bar or in the page's
tab.
Step1: HTML Editors
Open Notepad (PC)
Open the Start Screen (the window
symbol at the bottom left on your screen).
Type Notepad.
Step 2: Write Some HTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
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).
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:
Try It Yourself
HTML Exercises
Exercise 2
Exercise 3
HTML Exercises 4