35
| Date post: | 15-Jan-2015 |
| Category: |
Technology |
| Upload: | cherrybear2014 |
| View: | 41 times |
| Download: | 3 times |
Introduction to HTML
HyperText Markup Language
What is HTML?
What is HTML?
Hypertext Markup Language
What is HTML?
Hypertext Markup Language Hypertext:
Allows for non-linear linking to other documents
What is HTML?
Hypertext Markup Language Hypertext:
Allows for non-linear linking to other documents
Markup Language: Content to be displayed is “marked
up” or tagged to tell the browser how to display it.
HTML are the main code used for creating and
designing web pages. is written in the form of HTML
elements consisting of tags enclosed in angle brackets (like: <html> ).
Elements or tags<html></html>
Attributes that modify an element
HTML
HTML allows images and objects to be embedded and can be used to create interactive forms.
It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items.
Elements Elements are the fundamental
building blocks of HTML. They are the tags that tell the
browser what the enclosed text is.<title>My first HTML
page</title>The title element tells the browser
that this is the title of the page. Elements must be terminated
HTML
The purpose of a web browser is to read HTML documents and compose
them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.
Elements
General format of an element:
<startTag>Target content</endTag>
HTML is NOT case sensitive…
HTML Skeleton
<html><head><title>My first HTML Page!</title></head><body>I Love HTML!</body></html>
What do we need? | How to Save?
Notepad
To save:File > Save As > .txt and .html
HTML Sample
<html><head><title>My first HTML Page!</title></head><body>I Love HTML! Hypertext Markup
Language!</body></html>
Activity Time:
1. Open a Notepad2. Using the basic html tags and
elements, input the paragraph below and save as:
HTMLDoc1.html
Filename: HTMLDoc1.html
Title: My First HTML Document
Body: My name is Juan Dela Cruz and my hobbies are playing online games, surfing the net, read
travelling books and hang-out with my friends.
Assignment:
Follow-up:
1. Give the other elements and attributes in html.
References:Book: World Wide Web Development III, pages 46-48
Website: www.w3schools.com
Common Elements
<html></html> All markup must be placed within HTML
tags
<head></head> Contains information about the page as
well as other non-display content<body></body> All display content should go inside these tags
Common Elements
<p></p> Tells the browser that the enclosed
text should be set off in a paragraph.
<h1></h1> This is a heading – the number can
range from 1 to 7 for different sizes
Text Display Elements
<b></b> or <strong></strong> Bolds the tagged text<em></em> or <i></i> Italicizes the tagged text<pre></pre> Preserves white space and breaks
and stands for “preformatted”
Common Tags
<br> Inserts a line break This is an empty tag – it does not
have a closing tag.<hr> Inserts a horizontal rule (line) This is another empty tag
HTML Comments
An HTML Comment which is NOT displayed in the page is done like this:
<!-- This is a comment -->
Attributes
Sometimes we need more information for an element in order to control the way the content displays
We provide this information with attributes stated within the element start tag
Attributes
The generic way of using an attribute looks like this:
<elementName attribute=“value”>Target content</elementName>
Single or double quotes may be used to hold attribute values
Attribute examples
<p align=“center”>This will appear centered</p>
<img src=“mypicture.jpg”> This tag inserts the image
“mypicture.jpg” into the page. Make sure to use the right path!
Hyperlinks
Hyperlinks are created using the <a> tag, which stands for “anchor”. The format looks like this:
<a href=“uri_to_document”>Content to click on for the link</a>
The uri can also be a mailto: link
Tables
Tables require three different tags:<table></table> Defines the table itself<tr></tr> Defines a table row<td></td> Defines a table cell (table data)
TablesExample table:
<table><tr><td>Column One, row one</td>
<td>Column Two, row one</td></tr><tr><td>Column One, row two</td>
<td>Column Two, row two</td></tr></table>
Lists
Two main types: Unordered list
<ul></ul> Ordered List
<ol></ol>
List items are indicated by <li></li>
Font
You can modify more exactly the way text looks by using the <font></font> tag:
<font color=“red” size=“3” face=“Garamond”>
This is red, size 3, and in Garamond!</font>
Entities
Some content characters may not show up properly if simply placed inside tags.
How would you mark up the following:
Is 3<4 ?
Entities
In order to display these characters, we use entities to represent them:
Character: Entity:< <> >& &[space]
