Dr. Nuha El-KhaliliInternet Programming (102 340) HTML Hyper Text Markup Language The language of...

Dr. Nuha El-Khalili Internet Programming (102 340)

HTML

• Hyper Text Markup Language• The language of web pages• Maintained by the W3C http://www.w3c.org/• Text file with the suffix .html or .htm • Parsed and interpreted by the browser to display

the web page content• Separate presentation from content• Use any text editor (e.g. notepad) or special SW

to edit HTML (e.g. front page)

http://www.w3c.org/


HTML

• HTML defines “Elements” that can be used to mark-up the web page content.

• An element is indicated using a “Tag” (start tag, content, end tag)

<U> This text will appear underlined </U>

This text will appear underlined• “Attributes” gives you more control over elements

<element-name attribute-name=value> • Attributes specify some characteristics of the element


HTML Page Structure

• HTML web page consists of two parts: Head & Title

• <HTML> </HTML> tell the browser this is an HTML file

• <HEAD> </HEAD> information that is not displayed, but helps the browser. <Title> tag is part of the head tag

• <BODY> </BODY> the content of the page that will be displayed


First Example

<HTML><HEAD><TITLE> My First HTML page</TITLE></HEAD><BODY>This is the body of my page. <U> This part will be underlined </U>

</BODY></HTML>


Headings & Alignment

• Six size headings:– <H1>Biggest size Heading</H1>

– <H2>Size 2 Heading</H2>




– <H6>Smallest size Heading</H6>

• Text alignment can be: center, left or right

<CENTER><H1> Heading </H1></CENTER>

OR <H1 ALIGN=CENTER> Heading</H1>


FONT

• Font element controls font format and color

• Attributes:– Color=red – Size=5 – Face= “Arial”

• Color can be specified in Hexadecimal, e.g. red=“#ff0000”

• Font size 1..7 (default 3)<FONT SIZE=5 Color=red> YOUR TEXT</Font>


Images

• <IMG> element inserts an image in your page (Stand alone tag)

• Attributes:– SRC=“url” location of the image file– ALIGN=top dictates how text will be displayed in

relation to your image (right, middle, left, top, bottom)– WIDTH=100 HEIGHT=70 image size– ALT=“text” alternate text if image is not downloaded

<IMG SRC=“f.gif” ALT=“logo image”>


Links

• Hyperlink: a navigational tool to link documents– Decide which words to use a link

– Get the URL of the linked document

– The hyperlink element: <A> link word </A>

– HREF attribute specifies the address to link to: HREF="URL"

– Target=“_parent” destination of the loaded document (_top, _blank, _self or frame name)

<A HREF=“http://scs.leeds.ac.uk”> Leeds Computer School </A>

<A HREF="Mailto:[email protected]"> Send me email </A>

<A HREF="http://www.w3c.org"> <IMG SRC=“logo.gif" Border=0> </A>

http://scs.leeds.ac.uk/

http://scs.leeds.ac.uk/


Internal Links

• Assign a specific location in the HTML file a name (bookmark it)

<A name =“pos1”> </A>

• Now you can link to this specific location using a hyperlink tag<A HREF=“filename#pos1”> internal link </A>


Other tags

• <P> begin a new paragraph (leave a blank line)• <BR>force text to start on the next line• <HR>put a thin black line across your page• <U> underline text• <Em> emphasis text • <strong> make text bold• <sup> and <sub> for superscript and subscript• &#code; Special characters (e.g. "Γ" gamma )• <!– comment -- > put comments in your code


Other tags

• Unordered list (UL)<UL> <LI>Item 1. <LI>Item 2. </UL>

• Ordered list (OL)<OL type=“1”> <!- type can be “I”, “A”,”a”,”i” <LI> Item 1

<LI> Item 2

</OL>


More on Header

• Use the Meta tag to describe your webpage and to help the search engine categorize your page

• Attributes:– Name=“keywords”: identifies a property name– Content=“”: specifies a property's value<HEAD > <META name="author" content="John Doe"> <META name="keywords"

content=“graphics,3D,web"><META name=“description” content=“this is

my graphics web page”> </HEAD>


Body Attributes

<BODY BGCOLOR=BLUE TEXT=Yellow LINK=White ALINK=green VLINK=red BACKGROUND=“”> </BODY>

• BGCOLOR=white background color for the entire page• TEXT=black color of the page's text• LINK=White color of your hyperlink • ALINK=green color when clicking the hyperlink• VLINK=red color of visited links• BACKGROUND=“logo.jpg” image as a page

background


Tables

• <TD> TABLE CELL, is the basic unit of a cell• <TR> TABLE ROW, horizontal row of cells <TABLE>

<TR> <TD> Cell 1 </TD> <TD> Cell 2 </TD>

<TD> Cell 3 </TD> </TR>

<TR> <TD> Cell 4 </TD> <TD> Cell 5 </TD>

<TD> Cell 6 </TD> </TR></TABLE>

Cell 1 Cell2

Cell4 cell5

Cell3

Cell6


Tables

• Table attributes:– Border= 4 thickness of table border – Width= 400 or 30% – Align=“left” or “center” or “right”– BGCOLOR= Red table background color– CELLSPACING amount of space between table cells.– CELLPADDING pixels of space inside the cell between text

and the border

• TD tag attributes to align text in the cell:– ALIGN: left, center or right– VALIGN: top, middle or bottom or baseline


Tables

• <THEAD> </THEAD> table header tag

• <TR></TR> Header row definition

• <TH></TH> Header cell definition

• <caption> </caption> table caption on the top

• <TBODY> </TBODY>

• <ColGroup>: format a group of columns– <Col Align=“right” width=300 > – <Col span=“2”> number of columns affected


More on Tables

• To extend a data cell to more than one column, use attribute Colspan<TD COLSPAN=“4”><!- Make a cell cover 4 cells -- >

• To extend a cell over a number of rows, use the attribute Rowspan<TD ROWSPAN=“2”><!- Cell will cover 2 rows -- >

Table Example


Frames

• Displaying more than one web page on the same screen (no body tag)

• <FRAMESET> tells the browser how to divide the window into columns and rows, and how big is the size of each

<FRAMESET COLS="50%,50%"> </FRAMESET>

<FRAMESET ROWS=“200,*”> </FRAMESET>• <FRAME> tells the browser what to put into the

columns and rows specified

<FRAME NAME="red“ SRC=“url">


Frames

• You can nest frames to get a combination of horizontal and vertical windows

• <NoFrames> provide an alternative for browsers that does not display frames

• <Frame> attributes:– Scrolling=no, yes, auto: place scroll bar on the frame– Noresize: stop the user from changing the frame size

– Frameborder=0 or 1: Do not draw borders between frames


Frames

• The target attribute in a hyperlink takes values:– _blank : load in a new browser window– _parent: load into immediate FRAMESET parent of

the current frame– _self: load in the same window as the hyperlink – _top: load in the full original window – Frame name: variable specified in “Name” attribute

of a frame


Image Map• Divide the image into different hotspots that link to

different places• <Map>: defines an image map• <Area>: defines a hotspot in the image<MAP name="map1">

<AREA href=“f1.html" shape="rect" coords="0,0,96,10"> <AREA href=“f2.html" shape=“poly"

coords="98,0,183,10,30,20,“ Alt=“area2”> <AREA href=“f3.html" shape="circle" coords="184,0,10">

</MAP>• Add “USEMAP” attribute to your image tag

<IMG SRC=“pic.gif" USEMAP="#map1” >


Forms

• Get user input (textbox, buttons, pull down Box)• <FORM></FORM> declare a form in your page• Attributes:

– Name: identification of the form– Action: The file name that will process the data– Method: How the data will be sent to the server

• GET: (URL?dataname=datavalue&dataname=datavalue)• Post: environment variable as part of the HTTP request

• Do not nest forms


Forms• Text Box: one line input box

<INPUT type="text" name=“box1“ size="20“ tabindex=1 maxlength=50>

• More attributes: readonly / disabled• You can add label for each text box

<Label for=“t1”>First Text</Label><Input type=“text” id=“t1” name=“firstvalue”>

• Password: one line input box, but data appear as *’s<INPUT type=“password” name=“email”>

• Hidden: value not displayed but submitted with the form<INPUT type=“hidden” name=“code” value=“962”>


Forms

• Radio buttons: select one choice from a group <INPUT type="radio" name=“G1" value=“NO“ checked>

• Checkbox: select more than one choice from a group

<INPUT type="checkbox" name=“GN" value=“1">• Choices that belong to one group should have the same

name

• Text Area: multi-line text input box

<Textarea name=“TA" rows="3" cols="20“ accesskey=“k”> This text will appear inside</Textarea>


Forms

• Pull Down Box: <SELECT name=“menu“ size=1 multiple>

<OPTION selected >option 1

<OPTION>option2

</SELECT>

• Buttons:<INPUT type="submit" value=“OK">

<INPUT type=“reset” value=“clear”>


More on Forms

• Image submit button:<INPUT type=“image” src=“url/filename” name=“pic1” alt=“logo submit button” >

• Field set: place a frame around some of the form elements and write a caption for that part<FIELDSET>

<LEGEND> Caption to identify this part </LEGEND>

<!- Place form elements here -- >

</FIELDSET>

Date post:	29-Dec-2015
Category:	Documents
Upload:	annabelle-carson
View:	213 times
Download:	0 times

Dr. Nuha El-KhaliliInternet Programming (102 340) HTML Hyper Text Markup Language The language of...

Documents