HTML Slides 1
Download
Report
Transcript HTML Slides 1
HTML
THE WHAT
AND
THE HOW
OBJECTIVES
Understanding HTML: What is HTML?
Defining HTML
Facts about HTML
Creating Web pages with HTML: How do I write HTML code?
Working with tags
Adding structural elements
Adding heading elements
Adding paragraph elements
Adding list elements
WHAT IS HTML?
Web pages are made up of text, multimedia documents, and other
types of contents along with links to other documents.
You use HTML (Hypertext Markup Language) to:
provide information to the browsers as to how to display the content
on a web page (structure/layout of the document)
create links.
FACTS ABOUT HTML
• HTML is a markup language used to develop Web pages.
• HTML is extensively used on the Web.
• HTML documents are actually text files with HTML tags
embedded.
• HTML is not specific to any platform, computer brand, or operating
system.
• Each browser expresses the commands in its own way.
FACTS ABOUT HTML
Where is the HTML source code?
In Internet Explorer
In Mozilla Firefox or most other browsers
FACTS ABOUT HTML
HOW TO CREATE WEB PAGES USING
HTML
TOOLS
1. Text Editor
If you want to code your page from scratch, you can use Notepad,
Notepad++, TextEdit, Text Wrangler, etc.
2. Web Authoring Software
You can create your page using Web authoring software such as
CoffeeCup, Microsoft Expression Web, KompoZer, Amaya, or Adobe
Dreamweaver.
Advantages of Web authoring software
Disadvantages of Web authoring software
USING TAGS TO CREATE HTML
HTML uses tags.
Examples of tags:
<ul id="menuSubCoffee" class="menuVert invisible">
<li><div class="submenu_container"> <div class="menuContentContainer">
<p>Our menu offers great tasting products that will get you going and keep you running
throughout your busy day. Made to order just the way you like. </p></li>
<li><span class="colHeader"> Let's Hear It For Consistency</span>
<a href="/content/dunkindonuts/en/coffee.html">What Are You Drinkin'?</a>
<a href="/content/dunkindonuts/en/coffee/didyouknow.html">It Can Only Be
Dunkin'</a>
<a href="/content/dunkindonuts/en/coffee/coffeebrewingtips.html">Coffee Brewing
Tips</a></li></ul></div>
USING TAGS TO CREATE HTML
HTML tags follow a certain format, or syntax
Each tag begins with an opening angle bracket (<), ends with a
closing angle bracket (>) and contains a command between the
brackets.
Many of the tags are paired. The first tag indicates the beginning
of the command. The closing tag of the pair has the same syntax
as the opening tag, but includes a forward slash (/) before the
command.
EXAMPLE OF PAIRED TAGS
<html>
The entire Web document
</html>
USING HTML STRUCTURE TAGS
• Always two main sections: HEAD and BODY
<html>
<head>
<title> text that appears in title
bar</title>
</head>
<body>
all information that will be
displayed on the screen
</body>
</html>
HTML STRUCTURE
Like a sandwich?
ENTERING HEADINGS IN AN HTML FILE
Headings serve to separate text and introduce new topics on Web
pages.
The heading tags used for this purpose vary in size.
The size range from <h1> through <h6>, with <h1> being the
largest.
Example:
<h1>Our Mission and Objectives</h1>
<h3>Our Mission</h3>
<h3>Our Objectives</h3>
ENTERING TEXT IN PARAGRAPH
FORMAT
Web pages generally contain a significant amount of text, most of
which will be in paragraph format
<p>
</p>
<p> tag starts a new line and adds some additional vertical space
between the line it just displayed and the following line.
Example:
<p>This course provides for the building of browser-oriented
applications for intranet and extranet uses. Students will build
complex applications using web technologies..</p>
CREATING A LIST
Bulleted lists (Unordered Lists)
Numbered lists (Ordered Lists)
CREATING A LIST
UNORDERED LIST:
<ul type = “typeName”>
<li>First Item Name</li>
<li>Second Item Name</li>
</ul>
typeName: disc, square, circle
CREATING A LIST
ORDERED LIST:
<ol type = “typeName”>
<li>First Item Name</li>
<li>Second Item Name</li>
</ol>
typeName: 1, A, a, I, i
HTML: WHAT AND HOW - REVIEW
WHAT?
HTML = HyperText Markup Language
What does HTML do?
structures text and multimedia documents
sets up hypertext links between documents
Creation of Web pages
HOW?
Use of tags
Structure tags: <html>, <head>, <title>, <body>
Formatting tags: <h1> …<h6>, <p>, <ul>, <ol>, <li>