HTML Introduction

Introduction to
HTML
HAMEDA HURMAT

Definitions
W W W – World Wide Web.
HTML – Hypertext Markup Language – The Language of
Web Pages on the World Wide Web.
HTML is a text formatting language.
URL – Uniform Resource Locator.
Browser – A software program which is used to show web
pages.

What is HTML?
Hypertext Markup Language.
HTML is a computer language that is use to create documents on the Word Wide Web.
HTML is very simple , and logical. It reads from left to right, top to bottom and uses plain text.
HTML is NOT a programming language, but a markup-up language that uses <Tags> like this.
The websites you view on the internet are actually text files that consist of HTML Tags.

HTML Issues for Organizations
Why the need to know HTML code?
WYDIWG( What You See Is What You Get) editors like ( Front Page and Dreamweaver) create
program-specific code that is incomprehensible to other programs and may not be displayed
correctly on all browsers or all operating System
You cannot edit them if you don’t have the original software, Or know enough about HTML and
how it works to be able to make small edits your self
Company Intranets mostly use HTML
HTML is now also use in email and in email marketing
HTML is increasingly used as the basis of standalone applications that use a GUI

Advantages of knowing HTML code
New technologies start out as code without tools
 HTML(early days), JavaScript, Java, ASP, XML
Even if you use WYSIWYG editors, it helps to know HTML code to insert ASP or JavaScript into a
HTML file
If you can read code, you can copy clever idea from others( within reason and the law).
Go to any web page, click on “view” “page source “or "source” and the HTML code used to
create that web page can be studied or just copied
Web authoring tools don’t give as much control
 Most web professional web designers use HTML

Write HTML Using Notepad or TextEdit
HTML can be edited by using a professional HTML editor like:
 Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit
(Mac).
We believe using a simple text editor is a good way to learn HTML.
Follow the 4 steps below to create your first web page with Notepad.
Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.

“Normal text” surrounded by bracketed tags that
tell browsers how to display web pages
Pages end with “.htm” or “.html”
HTML Editor – A word processor that has been
specialized to make the writing of HTML documents
more effortless.

TAGS
HTML markup tags are usually called HTML tags
HTML tags are keywords surrounded by angle brackets like <html>
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
Start and end tags are also called opening tags and closing tags

TAGS
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>

Creating a Basic Starting Document
<HTML>
<HEAD>
<TITLE>Sharq University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

Co…
The HEAD of your document point to above window
part. The TITLE of your document appears in the very
top line of the user’s browser. If the user chooses to
“Bookmark” your page or save as a “Favorite”; it is
the TITLE that is added to the list.
The text in your TITLE should be as descriptive as
possible because this is what many search engines,
on the internet, use for indexing your site.

Setting Document Properties
Document properties are controlled by
attributes of the BODY element. For
example, there are color settings for the
background color of the page, the
document’s text and different states of
links.

Headings, <Hx> </Hx>
Inside the BODY element, heading elements H1 through H6 are generally used
for major divisions of the document. Headings are permitted to appear in any
order, but you will obtain the best results when your documents are displayed in
a browser if you follow these guidelines:
H1: should be used as the highest level of heading, H2 as the next highest, and
so forth.
You should not skip heading levels: e.g., an H3 should not appear after an H1,
unless there is an H2 between them.

<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
</BODY>
</HTML>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Paragraphs, <P> </P>
Paragraphs allow you to add text to a document in such a way that it
will automatically adjust the end of line to suite the window size of
the browser in which it is being displayed. Each line of text will
stretch the entire length of the window.

<HTML><HEAD>
</HEAD>
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H6> Heading 6</H6>
</BODY></HTML>
Heading 1
Paragraph 1,….
Heading 2
Paragraph 2,….
Heading 3
Paragraph 3,….
Heading 4
Paragraph 4,….
Heading 5
Paragraph 5,….
Heading 6
Paragraph 6,….

Break, <BR>
Line breaks allow you to decide where the text will
break on a line or continue to the end of the window.
A <BR> is an empty Element, meaning that it may
contain attributes but it does not contain content.
The <BR> element does not have a closing tag.

<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>….
</P>
</BODY>
</HTML>
Heading 1
Paragraph 1,….
Line 2
Line 3
….

Horizontal Rule, <HR>
The <HR> element causes the browser to display a
horizontal line (rule) in your document.
<HR> does not use a closing tag, </HR>

Attribute Description Default Value
SIZE Height of the rule in pixels 2 pixels
WIDTH
Width of the rule in pixels
or percentage of screen
width
100%
ALIGN
Aligns the line (Left,
Center, Right)
Center
COLOR
Sets a color for the rule (IE
3.0 or later)
Not set

HTML Text Formatting Elements
The HTML <b> element defines bold text, without any extra importance
The HTML <strong> element defines strong text, with added semantic importance.
The HTML <i> element defines italic text, without any extra importance.
The HTML <em> element defines emphasized text, with added semantic importance.
The HTML <mark> element defines marked or highlighted text.
The HTML <del> element defines deleted (removed) of text.
The HTML <ins> element defines inserted (added) text.
The HTML <sub> element defines subscripted text.
The HTML <sup> element defines superscripted text.

Tag Description
<b> Defines bold text
<big> Defines big text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead

HTML Introduction

Related slideshows

More Related Content

HTML Introduction