html body { margin-top: 50px !important; } #top_form { position: fixed; top:0; left:0; width: 100%; margin:0; z-index: 2100000000; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; border-bottom:1px solid #151515; background:#FFC8C8; height:45px; line-height:45px; } #top_form input[name=url] { width: 550px; height: 20px; padding: 5px; font: 13px "Helvetica Neue",Helvetica,Arial,sans-serif; border: 0px none; background: none repeat scroll 0% 0% #FFF; }
tags wrapping the content. Common elements like

-

define headings,

defines paragraphs, defines links, and embeds images.">

Scribd
Upload
19 views

HTML

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, links, images and other page elements. A basic HTML document structure includes <!DOCTYPE html> at the top, with <html>, <head>, <title> and <body> tags wrapping the content. Common elements like <h1>-<h6> define headings, <p> defines paragraphs, <a> defines links, and <img> embeds images.

Uploaded by

Moneth Ayen Orante
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views

HTML

HTML is the standard markup language used to create web pages. It uses tags to define headings, paragraphs, links, images and other page elements. A basic HTML document structure includes <!DOCTYPE html> at the top, with <html>, <head>, <title> and <body> tags wrapping the content. Common elements like <h1>-<h6> define headings, <p> defines paragraphs, <a> defines links, and <img> embeds images.

Uploaded by

Moneth Ayen Orante
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 22

HTML Introduction

HTML is the standard markup language for creating Web pages.


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

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
A Simple HTML Document

<!DOCTYPE html> declaration defines that this document is an HTML5


document
<html> element is the root element of an HTML page
<head> element contains meta information about the HTML page
<title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
<body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.

<h1> element defines a large heading


<p> element defines a paragraph
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

This is a visualization of
an HTML page structure:
HTML Page Structure

This is a visualization of
an HTML page structure:
HTML History

Since the early days of the World


Wide Web, there have been
many versions of HTML:
Steps below to create your first web page with Notepad or notepad ++

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

Step 2: Write Some HTML


Write or copy the following HTML code into Notepad:
Steps below to create your first web page with Notepad or notepad ++

Step 2: Write Some HTML


Write or copy the following HTML code into Notepad:
Steps below to create your first web page with Notepad or notepad ++

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).
Steps below to create your first web page with Notepad or notepad ++

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:


HTML Basic Examples

HTML Documents
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>
HTML Basic Examples

HTML Documents
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 represent the document type, and helps browsers
to display pages correctly.
I must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.
Example
HTML Headings
<!DOCTYPE html>
<html>
HTML headings are defined <body>
with the <h1> to <h6> tags.
<h1>This is heading 1</h1>
<h1> defines the most <h2>This is heading 2</h2>
<h3>This is heading 3</h3>
important heading. <h6>
<h4>This is heading 4</h4>
defines the least important <h5>This is heading 5</h5>
<h6>This is heading 6</h6>
headings:
</body>
</html>
Example
HTML Paragraphs
<!DOCTYPE html>
<html>
HTML paragraphs are defined <body>
with the <p> tag:
<p>This is a paragraph.</p>
<p>This is another
paragraph.</p>

</body>
</html>
Example
HTML Links
<!DOCTYPE html>
<html>
HTML links are defined with the <body>
<a> tag:
<h2>HTML Links</h2>
the links destination is <p>HTML links are defined with the a
tag:</p>
specified in the href attribute.
<a href="https://www.facebook.com">This
is a link</a>

</body>
</html>
Example
HTML Images
<!DOCTYPE html>
<html>
HTML images are defined with <body>
the <img> tag.
<h2>HTML Images</h2>
The source file ( src), <p>HTML images are defined with the img
tag:</p>
alternative text (alt), width, and
height are provided as <img src=“sample.jpg" alt=“facebook.com"
width="104" height="142">
attributes:
</body>
</html>
How to View HTML Source?
View HTML Source Code:

Right-click in an HTML page and select "View Page Source" (in Chrome) or "View
Source" (in Edge), or similar in other browsers. This will open a window
containing the HTML source code of the page.

Inspect an HTML Element:

Right-click on an element (or a blank area), and choose "Inspect" or "Inspect


Element" to see what elements are made up of (you will see both the HTML and
the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles
panel that opens.

You might also like