HTML

Introduction to HTML
HTML
HTML is the "mother tongue" of your browser.
The term hypertext was first introduced by Nelson in 1965.

HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents. The project became a bigger success. By inventing HTML he laid the foundation for the web as we know it today.
HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet.
HTML
H-T-M-L are initials that stand for Hypertext Markup Language . Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want. Text is what you will use. Real, honest to goodness English letters. Mark up is what you will do. You will write in plain English and then mark up what you wrote. Language it's a language -- but the language is plain English.
What can I use HTML for?

If you want to make websites, there is no way around HTML. Even if you're using a program to create websites, such as Dream weaver, a basic knowledge of HTML can make life a lot simpler and your website a lot better. The good news is that HTML is easy to learn and use.
HTML
Hyper Text Markup Language A markup language designed for the creation of web pages and other information viewable in a browser The basic language used to write web pages File extension: .htm, .html
Creating a HTML File

1. 2. 3. 4. 5. 6. Open Notepad Click on File -> Save as In the File name pull-down box, type in webpage.html Click on Save Type in content for your file Once you finished the content, click on File -> Save
How is a HTML File Looks Like
HTML Tags
Tags are labels you use to mark up the beginning and end of an element. Tag usually goes with pair: an open tag and an end tag. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">".
Effect Bold Italic Code B I Code Used <B>Bold</B> <I>Italic</I> What It Does Bold Italic
There are two kinds of tags - Opening tags: <html> - Closing tags: </html> The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag. Single tag: <hr>,<br> Tags are NOT case sensitive
HTML Document Structure

<html> <head> <title> Page Title Goes Here </title> </head> <body> content goes here </body> </html>
Basic Tags
<html> </html> :-- The entire web page is enclosed within <html> </html> tags. Within these tags two distinct sections are created using -- <head> </head> -- <body> </body> <head> </head> :-- Information placed within the <head> </head> tags is not displayed in the browser. <title> </title> :-- It is used to give the title of the web page. <body> </body> :-- This tag used to indicate the start and end of the main body of textual information.
Attributes/Elements of <body> </body>

Bgcolor Background Text Changes the default background color to whatever color is specified with this tag. Specifies the name of the gif file that will be used as the background of the document. Changes the body text color from its default value to the color specified with this attribute.
Example: <body bgcolor="#000000"> <body bgcolor="black"> <body background="clouds.gif">
Basic Tags
<b> </b> :- Bold <I> </I> :- Italics <U> </U> :- underline <br> :- line break <hr> :- horizontal line attributes of <hr> - width Example: - Size <hr width="50%" align="right"> <hr width="200" size="5" > - align* ="left" ="center" ="right
Basic Tags
Paragraph
Text
Put text on a webpage
<p> </p> :- paragraph
<p> Today is my first day at my new job, Im so excited! </p>

Output: Today is my first day at my new job, Im so excited!
Put text on the right of a page

<p align=right> Hello </p> Output: Hello
Put text in center of a page

<center> Hello </center> Output: Hello
Font
Font
To change text font <font face = Times new Roman> Hello </font> Output: Hello Tag attribute To change text size <font size=+3> Hello </font> Output: Hello To change text color <font color=red> Hello </font> Output: Hello Using both <font size=+3 color=red> Hello </font> Output: Hello
Comments in HTML
The comment tag is used to insert a comment in the HTML source code. A comment will be ignored by the browser. You can use comments to explain your code, which can help you when you edit the source code at a later date.  Note that you need an exclamation point after the opening bracket, but not before the closing bracket.
Heading
Lists
Example
Basic HTML Tables

A table organizes data in rows and columns (#of columns=#of cells) <TABLE> </TABLE> Enclose the table structure <TR> </TR> Table row <TD> </TD> Each data cell within a row. The smallest area of the table we are able to format
Basic table structure

<TABLE> <TR> <TD>A1</TD> <TD>A2</TD> <TD>A3</TD> </TR> <TR> <TD>B1</TD> <TD>B2</TD> <TD>B3</TD> </TR> </TABLE>
First row
First Column
A1
B1
A2
B2
A3
B3
Table Caption and Headers

<CAPTION ALIGN=value></CAPTION> A caption is centered at the TOP/BOTTOM of the table. <TH> </TH> special cells that act as table headers (centered and boldface)
<TABLE> <CAPTION>This is a table</CAPTION> <TR> <TH>First Row</TH> </TR> <TR> <TD>A1</TD> </TR> </TABLE>
This is a table
First row
A1
<Table> attributes
BORDER=# pixels> Size of the border around the table CELLSPACING =# pixels> space inserted b/w cells CELLPADDING =# pixels> size of the gap b/w the cell text and the cell border ALIGN =
LEFT/RIGHT> table is placed on the left/right and text is wrapped around the table CENTER> table is placed in the center of the page. Text is not wrapped around the table
More <Table> Attributes

BORDERCOLOR=color> changes the color of the border
BORDERCOLORDARK=color> BORDERCOLORLIGHT=color> creates a 3D effect for the border
More <Table> attributes

FRAME=box|above|below|void > controls which side of the table has borders
More <Table> attributes

RULES=all|rows|cols|none> controls around which cell the border is drawn.
<TABLE>,<TD>,<TH> attributes
WIDTH=pixels or %> Table/cell width in pixels or as % of the page/table HEIGHT=pixels or %> Same as above BGCOLOR=color> Change the table/cell background color BACKGROUND=pic.jpg> Tiles a picture as a background
Cell attributes (<TD>,<TH>)

COLSPAN=#> this cell spans for # columns ROWSPAN=#> this cell spans for # rows ALIGN= VALIGN=
LEFT/RIGHT> text in the cell is aligned left/right CENTER> text in the cell is centered TOP/BOTTOM> text in the cell is aligned top/bottom MIDDLE> text in the cell is aligned with the middle of the cell
Using tables for page layout

To display content in newspaper-like columns or separates the page in different topical areas. Start with the outer table and work your way in using nested tables Add background color to visually separate column Add cell padding to avoid crowding Use row spanning to vary the starting point of articles
Outer table
<BODY BACKGROUND="RedBar.jpg"
<TABLE WIDTH="610" >

<TR> <TD WIDTH="165" > Image+links</TD> <TD WIDTH="445" > Nested Table </TD> </TR> </TABLE>
Nested table
<TABLE WIDTH="445> <TR><TD COLSPAN=2 WIDTH=445>Logo</TD> </TR> <TR><TD ROWSPAN=2 WIDTH=350>Main</TD> <TD WIDTH=95>Side note</TD> </TR> <TR><TD WIDTH=95>Another note</TD> </TR> </TABLE>
Frames
Frames allow more than one Web page at a time to be displayed within the browser window When frames are used, the page opened in the browser contains instructions about how the browser window is to be divided into separate regions which page should be initially displayed into each region.
Navigating with frames

When frames are used, clicking on a link in a frame can:
Change the content of that frame Change the content of a different frame Display a page without using the frame page
Typical use of frames include

Table of content Navigation toolbars
Since the information displayed is visible at all times
Examples
Sites that use frames: BMW Microsoft Library DePaul University calendar Some sites that moved to a frame-free design: Amazon.com CTI Gap.com
HTML Frames
When frames are used, the HTML document has a different structure. There is no <BODY> tag, since a frame display the content of other pages. <HTML> <HEAD><TITLE></TITLE><HEAD> <FRAMESET> (How many frames you will use) <FRAME SRC=URL> (The page to be displayed in the first frame) <FRAME SRC=URL> </FRAMSET> </HTML>
<FRAMESET> Attributes
COLS=160,25%,*> a 3 columns frameset. The 1st is 160pixels wide The 2nd is 25% of the width of the display area The 3rd covers the remaining space ROW=row height 1, row height 2 ..>
Vertical Frameset
html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> OUTPUT
</frameset>
</html>
Horizontal Frameset
<html> <frameset rows="25%,50%,* "> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>
</html>
Cont.
<html> <frameset cols="25%,50%,25%" rows="50%,50%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> <frame src="frame_d.htm"> <frame src="frame_e.htm"> <frame src="frame_f.htm scrolling=no>
</frameset>
</html>
Cont
<html> <frameset rows="50%,50%"> <frame src="frame_a.htm">
<frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>
</frameset>
</html>
<noframe> tag
<html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm">
<noframes> <body>Your browser does not handle frames!</body> </noframes>

</frameset> </html>
The <FRAME> tag

<FRAME SRC=URL> URL is the name of the page to be displayed in this frame. If you have a 3 columns frameset you need 3 <FRAME SRC>
<FRAME> Attributes
FRAMEBORDER = 1 | 0> 1: draws a separator between this frame and every adjoining frame, default value 0: no separator between this frame and every adjoining frame SCROLLING = auto | yes | no> Set to "no" to prevent scroll bars NORESIZE > prevents user from resizing the frames
More <FRAME> Attributes

NAME = frame_name> Identifies each frame in the frameset Is used to identify that frame when we want to display a page within that frame. <A HERF=URL TARGET= frame_name> Frame_name can be any single word
<html> <frameset rows="50%,50%"> <frame noresize="noresize" src="frame_a.htm"> <frameset cols="25%,75%"> <frame noresize="noresize" src="frame_b.htm"> <frame noresize="noresize" src="frame_c.htm"> </frameset>
</frameset> </html>
<html>
<frameset cols= 120, * >

<frame src="tryhtml_contents.htm"> <frame src="frame_a.htm" name="showframe"> </frameset> </html>
tryhtml_contents.htm
<a href ="frame_a.htm" target ="showframe">Frame a</a><br> <a href ="frame_b.htm" target ="showframe">Frame b</a><br> <a href ="frame_c.htm" target ="showframe">Frame c</a>
Image tag
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.
Syntax
<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.
Image Alt Attribute The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: Example : <img src="boat.gif" alt="Big Boat"> If the image will not display on the page, browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page.
Image Size & Title Attributes Size: the size attributes define the width and height of the image. Example: <img src="image.jpg" width="200" height="150"> Title: It is used to give title for the Image. Example: <img src="image.jpg" alt=Sorry,The picture is not available" title=My friends">
Image Spacing Attributes You can create space between the image and surrounding text by defining vertical and horizontal space. Example: <img src="image.jpg" vspace="5" hspace="10">
Image Alignment Attribute
You can use the align attribute to position the image: Example: <img src="image.jpg align="left"> =right =center
Image Border Attribute

The border attribute places a border around the image. Example: <img src="image.jpg" border="1">
If no border attribute is specified, no border is applied. If you want to make an image without a border, specify a zero border. Example: <img src="image.jpg" border="0">
Hyperlink. Anchor Tag

HTML uses a hyperlink to link to another document on the Web. HTML uses the <a> (anchor) tag to create a link to another document. An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
Syntax <a href="url"> Text to be displayed </a> The href attribute is used to address the document to link to, The words between the open and close of the anchor tag will be displayed as a hyperlink.
Anchor Tag The Target Attribute
With the target attribute, you can define where the linked document will be opened. Example: <a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a> It will open the document in a new browser window:
Marquee Tag: <marquee> </marquee>
If you want your text to move with in the screen, use this tag. Example : <marquee> This text will move </marquee> The text in between the tags will move horizontally.
Marquee Attribute: bgcolor Attribute: height, width
bgcolor This sets the background color for marquee path Example : <marquee bgcolor=orange> Moving Text </marquee>
width :The attribute width sets the width of marquee area height: The attribute height sets the height of marquee area Example : <marquee bgcolor=orange width=100 height=20> Moving Text </marquee>
Marquee Attribute: direction
This sets the direction for the text. It takes values LEFT or RIGHT or UP or DOWN
Example : <marquee bgcolor=orange width=100 height=20 direction=right> Text will Move </marquee>
Marquee Attribute: behavior
This sets the background color for marquee path. It takes values
BEHAVIOR=SCROLL, which is the default, indicates that the content should scroll off the edge of the marquee area, then reappear on the other side: BEHAVIOR=SLIDE, is almost the same, except that it indicates that when the leading part content reaches the left edge it should stop without scrolling off. BEHAVIOR= ALTERNATE, makes the content bounce back and forth, all of it remaining visible all the time
Example: <marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate> Moving Text</marquee>
Marquee Attribute: LOOP

LOOP sets how many times the marquee should loop. The default value (i.e. if you don't put a LOOP attribute at all) is INFINITE, which means that the marquee loops endlessly. This code creates a marquee that loops twice: Example: <MARQUEE LOOP=2> Moving text </MARQUEE> One of the problems with LOOP is that the content disappears after the last loop. To set the marquee so that the content is visible when the looping is done set BEHAVIOR SLIDE: Example: <MARQUEE LOOP=2 BEHAVIOR=SLIDE> Moving text </MARQUEE>
Marquee Attribute: scrollamount
This controls the amount of movement (in pixels) between the successive displays that give the impression of animation.
Example : <marquee bgcolor = orange width=200 height=20 direction=right behavior=alternate scrollamount = 5> Moving Text </marquee>
Marquee Attribute: scrollDelay
This controls the delay (in milliseconds) between the successive displays that give the impression of animation.
Example : <marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate scrolldelay = 5> Scrolling Text Tag </marquee>
Client-side Web Application Development Forms
How do forms work?

Forms are used on the Web to collect information from users The information is then sent to a program running on the Web server called CGI script (Common Gateway Interface) The CGI script receives the data from the Web page, then acts on that data to perform a certain task
Forms/CGI script interaction

CGI script languages AppleScript C/C++ Perl The Unix shell Visual Basic
ASP
Forms
HTML Forms are used to select different kinds of user input. A form is an area that can contain form elements. Field: Each element in which user can enter information Field value: Data entered in a field <FORM> </FORM>: Encloses the form elements and layout tags <INPUT>: For each field you have to specify the type of input (input box, radio button etc)
Form structure
<FORM> <TABLE> <TR> <TD>First Name: </TD>
First Name: Address:
<TD> <INPUT NAME=FirstName> </TD> </TR> <TR> <TD>Address: </TD>
<TD> <INPUT NAME=Address> </TR> </TABLE> </FORM>
</TD>
<FORM> Attributes
<FORM NAME=text ACTION=URL METHOD=GET/POST> NAME: Identifies the form ACTION: Identifies the CGI script that will process the form METHOD: Controls how the browser sends data to the Web server for the CGI Script. GET: Packages the form data by appending it to the end of the URL: specified in the ACTION property POST: Send form information in a separate data stream
<INPUT> attributes
<INPUT NAME=text VALUE=text/# SIZE=# MAXLENGTH=# TYPE=predefined>
NAME: Identifies the field SIZE: Of the input box, in characters, default is 20, does not limit the input VALUE: Default text or number that will appear in the field MAXLENGTH: Max # of characters user can input TYPE: text box is the default
<INPUT TYPE = >

PASSWORD: Characters typed by user are displayed as bullets or asterisk HIDDEN: used to pass hidden information to the CGI script (like the email of the person that should receive the form). The user does not see the content of the field The user is not allowed to change the value of the hidden field Usually all hidden fields are placed right after the <FORM> tag
Radio buttons
<INPUT TYPE=RADIO NAME=text VALUE=value CHECKED>
Display a list of choices from which the user makes a selection NAME: the field containing the radio button. The same may be used for many buttons. VALUE: the value sent to the CGI script CHECKED: makes the particular radio button the default choice
Check Boxes
<INPUT TYPE=CHECKBOX NAME=text VALUE=value CHECKED>
It is either selected or not. There is only one check box per field NAME: the field containing the check box VALUE: the value sent to the CGI script if the check box is selected (yes/no) CHECKED: makes the particular check box the default choice
<TEXTAREA NAME=text COLS/ROWS=value WRAP=option> Default text </TEXTAREA>
Text area
Allows users to enter to enter comments NAME: the field containing the text area ROWS: number of available lines COLS: number of characters in each line
OFF: turns off text wrapping SOFT (VIRTUAL): turn text wrapping on
WRAP:
Selection lists
<SELECT NAME=text SIZE=value MULTIPLE> <OPTION> Option 1 <OPTION> Option 2 </SELECT> A list box from which the user selects a particular (set of ) value(s). (Drop-down menus) SIZE: # of items the list displays in the form MULTIPLE: using the CTR or SHFT key the user can select more than one item
Form Buttons
<INPUT TYPE=text VALUE=text>
Form fields that perform an action when activated (by the user clicking) VALUE: text that appears on the button TYPE= SUBMIT: Submits the form to the
CGI script
RESET: Cancels or resets the appearance of a form
BUTTON: Performs an action within the page by running a script

HTML

Diunggah oleh

Informasi Dokumen

Deskripsi 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

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Introduction to HTML

The term hypertext was first introduced by Nelson in 1965.

What can I use HTML for?

Creating a HTML File

How is a HTML File Looks Like

HTML Document Structure

Attributes/Elements of <body> </body>

Example: <body bgcolor="#000000"> <body bgcolor="black"> <body background="clouds.gif">

<p> Today is my first day at my new job, Im so excited! </p>

Put text on the right of a page

Put text in center of a page

Basic HTML Tables

Basic table structure

Table Caption and Headers

More <Table> Attributes

More <Table> attributes

More <Table> attributes

Cell attributes (<TD>,<TH>)

Using tables for page layout

<TABLE WIDTH="610" >

Navigating with frames

Typical use of frames include

Since the information displayed is visible at all times

<frameset cols="25%,75%"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset>

<noframes> <body>Your browser does not handle frames!</body> </noframes>

The <FRAME> tag

More <FRAME> Attributes

<frameset cols= 120, * >

Image Alignment Attribute

Image Border Attribute

Hyperlink. Anchor Tag

Anchor Tag The Target Attribute

Marquee Tag: <marquee> </marquee>

Marquee Attribute: bgcolor Attribute: height, width

Marquee Attribute: direction

Marquee Attribute: behavior

Example: <marquee bgcolor=orange width=200 height=20 direction=right behavior=alternate> Moving Text</marquee>

Marquee Attribute: LOOP

Marquee Attribute: scrollamount

Marquee Attribute: scrollDelay

Client-side Web Application Development Forms

How do forms work?

Forms/CGI script interaction

First Name: Address:

<TD> <INPUT NAME=FirstName> </TD> </TR> <TR> <TD>Address: </TD>

<TD> <INPUT NAME=Address> </TR> </TABLE> </FORM>

<INPUT TYPE = >

<TEXTAREA NAME=text COLS/ROWS=value WRAP=option> Default text </TEXTAREA>

BUTTON: Performs an action within the page by running a script

Anda mungkin juga menyukai