Embed Size (px)
Citation preview
Introduction to HTML
SSE 3200Web-based Services
Michigan Technological UniversityNilufer Onder
What is HTML?
● Acronym for: HyperText Markup Language● HyperText refers to text that can initiate
jumps to other text● Markup refers to the fact different parts of
the text are identified by tags● Most of these tags tell how the text is
formatted
A simple example
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Example 1</TITLE>
</HEAD>
<BODY>
This is the first example.
</BODY>
</HTML>
A simple example
<!DOCTYPE html><HTML> <HEAD> <TITLE>Example 1</TITLE> </HEAD> <BODY> This is the first example. </BODY></HTML>
Two parts are shown: HEAD and TITLE.
We'll write HTML tags in capital letters so that they stand out.
Notice that each tag is paired with another tag that has the same name but starts with “/”. Most tags are paired but there are exceptions such as <BR>.
Tags
<BODY>
This is the first example. We are starting with the basics.
</BODY>
Most tags come in pairs. The tag start specifies where the tagged region starts (e.g., <BODY> above). Tag start contains the name of the element, and sometimes the attributes of the element. The tagged region ends at tag end. The tag end contains “/” followed by the element name. (e.g., </BODY> above).
A web browser is a program that reads these tags and formats the page accordingly.
Advancing lines
<BODY>This is the first example. We are starting with the basics.
</BODY>
<BODY>This is the first example. We are starting with the basics.
</BODY>
HTML semantics is set up to ignore spaces. The above two examples would produce the same look.
The <BR> tag
<BODY>
This is the first example.
<BR> We are starting with the basics.
</BODY>
BR stands for “line BReak”. It simply causes the text to advance to the next line. Several <BR> tags can be repeated to advance many lines.
Specifying headers
<BODY>
<H1>This is the first example.</H1>
<BR> We are starting with the basics.
</BODY>
Headers are a simple way to change the text font. HTML provides 6 header tags ranging from <H1> to <H6>. <H1> is the highest level with the largest font.
Other styles
<BODY>
<I>This is line will appear in italics.</I>
<BR>
<B>This line will appear in bold.</B>
<BR>
<CODE>This line will appear in typewriter font.</CODE>
<BR>Can define subscripts and superscripts:
x<SUB>i</SUB> = y<SUP>2</SUP>
</BODY>
Inserting pictures
<BODY>
Here is a picture of my experimental setup:
<BR>
<IMG SRC = “exp01.jpg”>
</BODY>
Images are inserted using an IMG tag. IMG tags do not have corresponding end tags. The SRC attribute contains the location of the image resource. In the above example, “exp01.jpg” is the name of the file that contains a picture.
Image formats
The image has to be in a format that a web browser can display. JPG, GIF, and PNG are widely used formats.
JPG; Joint Photographers Expert Group
GIF: Graphics interchange format
PNG: Portable Network Graphics
Can use the OBJECT tag
<BODY>
Here is a picture of my experimental setup:
<BR>
<OBJECT DATA = “exp01.jpg” TYPE = “IMAGE/JPG”>
</BODY>
Images can also be inserted using the OBJECT tag. OBJECT refers to any type of multimedia data.
Note that when a picture is inserted into the HTML document, it is called an inline picture.
Background images
<BODY BACKGROUND=”bluestars.jpg”>
Here is a picture of my experimental setup:
<BR>
<OBJECT DATA = “exp01.jpg” TYPE = “IMAGE/JPG”>
</BODY>
Images can serve as the background of a web page. This is achieved by adding a background attribute to the BODY tag.
In the above example, the picture bluestarts.jpg will be repeated in lines from left to right and top to bottom.
Background colors
<BODY BGCOLOR=”green”>
Here is a picture of my experimental setup:
<BR>
<OBJECT DATA = “exp01.jpg” TYPE = “IMAGE/JPG”>
</BODY>
The background attribute can have a color code or a color name. There are predefined color names available. Custom colors can be created using RGB codes.
RGB codes● RGB stands for RedGreenBlue.
● An RGB code has three hexadecimal numbers each defining the intensity of the corresponding beam.
● FFFFFF produces white and 000000 produces black.
● 33CCCC produces a turquoise.
● 33FF66 produces a bright, light green.
● Search for “rgb codes” to look at color names and codes.
No links yet?
<BODY>
Click on <A HREF=”http://www.cs.mtu.edu”>CS department</A> to see the web page for the Computer Science Department at Michigan Tech.
</BODY>
Links are specified using ANCHOR tags. The HREF within the tag beginning shows a URI that the web browser will jump to when the user clicks on the link. This destination could be anything that can be displayed by a web browser.
URI stands for Uniform Resource Identifier. It is a unique name used to access a resource.
Lists
<BODY>
<UL> <LI> first item <LI> second item <LI> third item</UL>
</BODY>
UL refers to an unordered list. Each LI designates a “line item.” UL creates a bulleted list, OL (ordered list) creates a numbered list.
How would a list of links be created?
Tables<TABLE BORDER = “1”>
<TR> <TD> <B>Class</B> </TD> <TD> <B>Grade</B> </TD> <TD> <B>Audit</B> </TD></TR><TR> <TD> CS 1234 </TD> <TD> 28 </TD> <TD> 0 </TD></TR><TR> <TD> CS 5678 </TD> <TD> 15 </TD> <TD> 2 </TD></TR>
</TABLE>
Tables<TABLE BORDER = “1”>
<TR> <TD> <B>Class</B> </TD> <TD> <B>Grade</B> </TD> <TD> <B>Audit</B> </TD></TR>...
Each TR defines a row.
Each TD defines a cell.
Summary
● HTML is a tagbased formatting language● It is a standard and as is being maintained
as such● Scripts such as Javascript need to be
embedded to be able to processing from a web page
References
● Wikipedia's entry on HTML:http://en.wikipedia.org/wiki/HTML
● Online html tutorial at:http://www.w3schools.com/html/default.asp
● HTML manuals at:http://www.w3.org/TR/html4/
