Scribd
Upload
25 views

introduction to HTML lanuage

Uploaded by

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

introduction to HTML lanuage

Uploaded by

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

EIS WDDBA1 08 1221 Create a simple markup language document

What is HTML?
 HTML stands for Hyper Text Markup Language(Hypertext is text which contains
links to other texts. )
 HTML is the standard markup language for creating Web pages(It
defines the content
and structure of web content. It is often assisted by technologies
such as Cascading Style Sheets (CSS) and scripting languages
such as JavaScript.)
 HTML describes the structure of a Web page(how information is organized and
interconnected on a website)
 HTML consists of a series of elements(which you use to enclose, or wrap,
different parts of the content to make it appear a certain way, or
act a certain way.)
 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
Example
<!DOCTYPE html> Means an instruction to the web browser about
what version of HTML the page is written in
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
An HTML tag is a piece of markup language used to indicate the
beginning and end of an HTML element in an HTML document.
Example Explained
 The <!DOCTYPE html> declaration defines that this document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the browser's title bar
or in the page's tab)
 The <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.
 The <h1> element defines a large heading
 The <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>

<html> start tag


</html> an end tag

The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>

Start tag Element content End tag


 <h1> My First Heading </h1>
 <p> My first paragraph. </p>
 <br> none none

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:

View in Browser

HTML Page Structure


Below is a visualization of an HTML page structure:

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Note: The content inside the <body> section 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.

Step 1: Open Notepad (PC)


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.

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").

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>.

Example
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>
</body>
</html>

The <!DOCTYPE> Declaration


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.

The <!DOCTYPE> declaration for HTML5 is:

<!DOCTYPE html>

HTML Headings
HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading:

Example
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Links
HTML links are defined with the <a> tag:
Example
<a href="https://www.w3schools.com">This is a link</a>

The link's destination is specified in the href attribute.

Attributes are used to provide additional information about HTML elements.

You will learn more about attributes in a later chapter.

HTML Images
HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as
attributes:

Example
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="14
2">

How to View HTML Source


Have you ever seen a Web page and wondered "Hey! How did they do that?"

View HTML Source Code:


Click CTRL + U in an HTML page, or right-click on the page and select "View
Page Source". This will open a new tab containing the HTML source code of the
page.

Inspect an HTML Element:


Right-click on an element (or a blank area), and choose "Inspect" 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