Intro To HTML

HTML in Web Design
Prepared by:
Aimhee Martinez- Santos
What is HTML?
HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it is a markup language A markup language is a set of markup tags HTML uses markup tags to describe web pages
HTML 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.
HTML Documents
HTML Documents = Web Pages HTML documents describe web pages HTML documents contain HTML tags and plain text HTML documents are also called web pages
Example
Simple HTML <html> <body> <h1>My First Heading</h1> Example Explained The text between <html> and </html> describes the web page The text between <body> and </body> is the visible page content The text between <h1> and </h1> is displayed as a heading The text between <p> and </p> is displayed as a paragraph
<p>My first paragraph</p>

</body> </html>
Document Structure Tags

Opening Tag Closing Tag Attribute Description
<HTML> <HEAD> <TITLE>

<BODY>
</HTML> </HEAD> </TITLE>

</BODY>
Identifies document as HTML Document Head contains Title Tag Title of Document Contents of Document
Formatting Tags- BASIC

Opening Tag Closing Tag </BODY> BGCOLOR="#color code" BACKGROUND="... .gif " Attribute Description Contents of Document Background Color
<BODY>
Background Image
TEXT="#color code"
Text Color
Centers Text and Images Heading
<CENTER > <H1> to <H6>
</CENTER>
</H1>to</H6>
ALIGN="Left, Center, Right"
Align Text
Formatting Tags
<BASEFONT SIZE="1 to7">
specify the overall font for your page : place <basefont> tag at the beginning of the <body> section.
<P>
</P>
New Paragraph
Align Text
<BR>
Line Break
Formatting Tags
<HR>
Horizontal Rule
Align Text- 3 choices
SIZE = "number"
Thickness of Horizontal Rule
WIDTH = "number %"
% of Document to Span
NOSHADE
Removes Shading
FONT tags
Opening Tag Closing Tag Attribute Description Section of Text
<FONT>
</FONT>
COLOR="#color code"
Font Color
SIZE="number"
<B> <U> <I> </B> <U> </I>
Font Size
Bold Text
Underline Text
Italic Text
FONT tags
Opening Tag Closing Tag Attribute Description </STRIKE>
<STRIKE>
Strikeout
<BLOCKQUOTE>
</BLOCKQUOTE>
Separates Text
<SUB> <SUP>
</SUB>
Superscript Text SUB Subscript Text SUP
</SUP>
HTML Headings
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading
Use HTML headings for headings only. Don't use headings to make text BIG or bold. Search engines use your headings to index the structure and content of your web pages.
HTML Styles
The purpose of the style attribute is:
To provide a common way to style all HTML elements. Styles was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly by in separate style sheets (CSS files). You can learn using styles with CSS Examples: 1. style="background-color:yellow" 2. style="font-size:10px" 3. style="font-family:Times" 4. style="text-align:center"
Definition LISTS
Optional list header(LH), followed by one or more terms(DT) and definitions(DD). A definition list is a list of terms and corresponding definitions. Definition lists are typically formatted with the term on the left with the definition following on the right or on the next line. The definition text is typically indented with respect to the term.
Definition LISTS
The opening list tag must be <DL>. It is followed by an optional list header (<LH>caption</LH>) and then by term names (<DT>) and definitions (<DD>).
For example:
<DL> <LH>My Favorites</LH> <DT>Song<dd>This is My LIFE!!!<br> I love this one <DT>Author<dd>Carole Mortimer <p>WOW!!! </DL>
LISTS
List tags define lists of elements that may be displayed as bulleted or numbered lists, glossary entries with definitions, and menu formats. All of these layouts are useful when organizing lists of items or elements to improve their readability.
Unordered LISTS
An unordered list is a list of items. The list items are marked with bullets (typically small black circles). An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. <html><body> <h4>An Unordered List:</h4> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body></html>
Ordered LISTS
Ordered Lists An ordered list is also a list of items. The list items are marked with numbers. An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. <ol> <li>Coffee</li> <li>Milk</li> </ol>
Types of Ordered LISTS

<h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase letters list:</h4> <ol type="a"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
<h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol> <h4>Lowercase Roman numbers list:</h4> <ol type="i"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>
Types of Unordered LISTS

<h4>Disc bullets list:</h4> <ul type="disc > <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul> <h4>Circle bullets list:</h4> <ul type="circle > <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>
<h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>
The Graphics Images

The Image Tag and the SRC Attribute
In HTML, images are defined with the <img> tag. The <img> tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. The syntax of defining an image:
<img src="url"> The URL points to the location where the

image is stored. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
Attributes of Images
<p> An image <img src=url/inage align="bottom" width="100" height="50"> in the text </p>
<p> An image <img src ="/images/xhtml.gif" align="top" width="100" height="50">
<p>
An image <img src ="/images/xhtml.gif align="middle" width="100" height="50"> in the text </p>
in the text
</p>
Using Hyperlinks
Link Tags: <A> ... </A>
Links on web pages are created using the anchor <A> tag. These links can point to a different document on the Internet or to some anchor on the same page. Documents linked in this manner need not be HTML (or PHP/ASP) files. You can place a link to any kind of file, like in PPT or DOC files. Style Tip Use hyperlinks liberally throughout your HTML pages to create links to related resources and to information on your own site as well as other sites.
Links in Files
HTML documents contain certain 'hot spots'. These hot spots provide the links to other documents/files on the Internet.
Lets look at this tag in detail.
<A HREF=http://www.webdevelopersnotes.com> Takes you to Webdevelopersnotes.com's main page </A> is displayed as This will take you to Webdevelopersnotes.com's main page.
Anchor tags have a starting (<A>) and an (</A>) ending
tag. The HREF attribute is required and takes the URL address of the destination page as value. Without this attribute-value, no links will be created. Some text is enclosed between the anchor tags. This text serves as the hot spot. When a visitor clicks on this 'hot spot', he or she will be transported to the target page.
The Anchor Tag and Hyperlinks

Hyperlinks are the colored, underlined words you find on a web
document. Clicking on these words will send you to a predefined location on the same document, to another page on the same server or to a location on another server.
Hyperlinks are created using the anchor tag. <a command="target">Highlighted Text</a>
Commands for this tag can be: 1. href - Signifies a hyperlink. 2. name -Signifies a specified location on page. 3. The anchor tag requires a closing tag- </a>
Links in Files
Linking in the same document
We employ the <A> tag in this case too, but its format changes slightly. Instead of a URL in the HREF attribute, we use names. First, an anchor is set at the desired place in the document using the NAME attribute. In this case :
<A NAME="top"></A>
The value of NAME attribute can be anything you want use. Also note, that it is not necessary to enclose any text or other HTML element if the anchor tag is used in this manner. 1. After setting an anchor with its NAME attribute you employ another set of <A> to make a link that points to it:
<A HREF="#top" CLASS="text">Click here to go to the top</A>.
1. On clicking this link, you will be taken to the top of the page where you have put the anchor. 2. The HREF attribute takes the value of the NAME attribute mentioned before as its value; the name is prefixed with a # symbol.
Links in Files
a href
Text links are defined with the hyperlink reference anchor. It looks like this in your code:
Removing the Underline
The default underline can be removed from the hyperlink using style sheets. Though, you should not remove the underline from links within your document body, there are times when this practice is acceptable.
<a href="target">Destination</a> Location on Same Site To link to another page on the same site the code would be: <a href="samesite.htm"> Another Page</a> To link to another site: Note: http:// is required. <a href="http://www.destination.com/ index.html">Another Site</a>
The code:
a {text-decoration : none}
Links in Files
Rollover Effect
You've seen hyperlinks that change colors when the mouse is placed over them. We use this effect on links. The code for assigning colors to the different states of the hyperlink is shown below. It can be placed in a style sheet in the head section of your document. Change the specified colors to produce your own version of rollovers. a:link{color :#000000} a:visted{color :#BFBFBF } a:hover{color :#DFDFDF }
HTML Styles
The purpose of the style attribute is:
1. To provide a common way to style all HTML elements. 2. Styles was introduced with HTML 4, as the new and preferred way to style HTML elements. With HTML styles, styles can be added to HTML elements directly by using the style attribute, or indirectly by in separate style sheets (CSS files).
HTML Style Examples

style= "backgroundcolor:yellow" style= font-size:10px" style= "font-family:Times" style= "text-align:center"
Color Values
HTML colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign.
Color Values
Color Color HEX #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #C0C0C0 Color RGB rgb(0,0,0) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255) rgb(255,255,0) rgb(0,255,255) rgb(255,0,255) rgb(192,192,192)
#FFFFFF
rgb(255,255,255)
Uses of Color Values

The COLOR Values can be used with: 1. <body background=#00ff00> 2. <font color= #FF00FF> 3. In table cells, <td background = #aa0099>

Intro To HTML

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Intro To HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML in Web Design

Aimhee Martinez- Santos

<p>My first paragraph</p>

Document Structure Tags

<HTML> <HEAD> <TITLE>

</HTML> </HEAD> </TITLE>

Formatting Tags- BASIC

<CENTER > <H1> to <H6>

ALIGN="Left, Center, Right"

<BASEFONT SIZE="1 to7">

Align Text- 3 choices

Thickness of Horizontal Rule

WIDTH = "number %"

Superscript Text SUB Subscript Text SUP

Types of Ordered LISTS

Types of Unordered LISTS

The Graphics Images

<img src="url"> The URL points to the location where the

<p> An image <img src ="/images/xhtml.gif" align="top" width="100" height="50">

Lets look at this tag in detail.

Anchor tags have a starting (<A>) and an (</A>) ending

The Anchor Tag and Hyperlinks

<A HREF="#top" CLASS="text">Click here to go to the top</A>.

HTML Style Examples

Uses of Color Values

Anda mungkin juga menyukai