Introduction to HTML - MSCS - Marquette University

Introduction to

HTMLHTML

1Slides prepared by : Farzana Rahman

How to Create and View an HTML document?

• Use an text editor such as Editpad or TextPad to write the

document.

• Save the file as filename.html on a PC. This is called the

Document Source.

• Open Firefox (or any browser) Off-Line • Open Firefox (or any browser) Off-Line

• Click on File, Open File and select the filename.html

document that you just created.

• Your HTML page should now appear just like any other Web

page in Firefox


What is HTML

• HyperText Markup Language - HTML is a collection of

platform-independent styles that define the various

components of a World Wide Web document.

• HTML was invented by Tim Berners-Lee while at CERN,

the European Laboratory for Particle Physics in Geneva.


HTML Basics

• HTML documents are plain-text (also known as ASCII) files

that can be created using any text editor.

• You can also use word-processing software if you remember

to save your document as "text only with line breaks".

• An element is a fundamental component of the structure of a • An element is a fundamental component of the structure of a

text document.

• Some examples of elements are heads, tables, paragraphs, and

lists.

• Elements can contain plain text, other elements, or both.


HTML Basics (Cont.)

• To denote the various elements in an HTML document, you

use tags.

• HTML tags consist of a left angle bracket (<), a tag name, and

a right angle bracket (>).

• Tags are usually paired (e.g., <H1> and </H1>) to start and • Tags are usually paired (e.g., <H1> and </H1>) to start and

end the tag instruction.

• The end tag looks just like the start tag except a slash (/)

precedes the text within the brackets.


Example

<html><head>

<TITLE>A Simple HTML Example</TITLE> </head> <body>

<H1>HTML is Easy To Learn</H1> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</P><P>And this is the second

paragraph.</P> </body></html>


HTML Basics (Cont.)

• Markup Tags

• HTML

• This element tells your browser that the file contains

HTML-coded information. HTML-coded information.

• The file extension .html also indicates this an HTML

document and must be used.


HTML Basics (Cont.)

• HEAD

• The head element identifies the first part of your HTML-coded

document that contains the title.

• The title is shown as part of your browser's window• The title is shown as part of your browser's window


HTML Basics (Cont.)

• TITLE

• The title element contains your document title and identifies its

content in a global context.

• The title is typically displayed in the title bar at the top of the • The title is typically displayed in the title bar at the top of the

browser window, but not inside the window itself.


HTML Basics (Cont.)

• BODY

• The second--and largest--part of your HTML document is the body,

– which contains the content of your document (displayed within the text area of your browser window).

• All other tags now come within the body tag.


HTML Basics (Cont.)

• Headings

• HTML has six levels of headings, numbered 1 through 6, with 1 being the largest.

• Headings are typically displayed in larger and/or bolder fonts than normal body text. The first heading in each document than normal body text. The first heading in each document should be tagged <H1>.

• The syntax of the heading element is: <Hy>Text of heading </Hy> where y is a number between 1 and 6 specifying the level of the heading.


HTML Basics (Cont.)

• Paragraphs

• Unlike documents in most word processors, carriage returns in HTML files aren't significant.

• n fact, any amount of whitespace -- including spaces, linefeeds, and carriage returns –

– are automatically compressed into a single space when your HTML document is displayed in a browser.

• A Web browser ignores this line break and starts a new paragraph only when it encounters another <P> tag


Tags in Body

• Let's talk Text

• Heading: <H1> </H1>

• Center:<Center> </Center>

• Line Break <P> ,<Br>

• Phrase Markups: <I></I> ,<B></B>• Phrase Markups: <I></I> ,<B></B>

• Create a List

• Unordered list : <UL><li>

• Ordered list: <OL><li>

• Nested


Adding Images

• Use <IMG SRC=imagefilename> tags

• How to specify Relative pathnames

• Attributes of IMG tag

• -width,height• -width,height

• -Alt

• -Align

• -<Img src=my.gif width=50 height=50 align=right

• alt=“My image”>


<A> Anchors (HyperLinks)

Link to an absolute URL:

If you get spam, contact <A HREF="htttp:www.microsoft.com">

Microsoft </A> to report the problem.

Link to a relative URL:

15

See these <A HREF="#references"> references </A>

concerning our fine products.

Link to a section within a URL:

Amazon provided a <A HREF="www.amazon.com/#reference">

reference for our company. </A>

Slides prepared by : Farzana Rahman

Naming a Section

<H2> <A NAME="#references"> Our References </A> </H2>


Hyperlinks

<BODY>

<H3>Welcome to <A HREF=“www.mscs.mu.edu">

<STRONG>Computer Science</STRONG></A>

at the <A HREF="www.mu.edu">Marquette University</A>

</H3>

</BODY>

17

</BODY>


Images

• SRC is required

• WIDTH, HEIGHT may be in units of pixels or

percentage of page or frame

– WIDTH="357"

18

– HEIGHT="50%"

• Images scale to fit the space allowed


Align=position Image/Text Placement

Left Image on left edge; text flows to right of image

Right Image on right edge; text flows to left

Images

19

Top Image is left; words align with top of image

Bottom Image is left; words align with bottom of image

Middle Words align with middle of image


How to make colors changes?

Hexadecimal number

• Color names : <Font color=white>

• Changing the Background color

– <BODY BGCOLOR=#19378a>

• Changing Text color• Changing Text color

– <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66

VLINK=#66ffff>

• Spot color

– <FONT COLOR=#66ffcc>WENT'99</FONT>

• Image Background

– <BODY BACKGROUND=bgimg.gif >


<PRE> Preformatted Text

<PRE>

if (a < b) {

a++;

b = c * d;

}

21

}

else {

a--;

b = (b-1)/2;

}

</PRE>


Special Characters

Character Use

< <

> >

22

& &

" "

Space


Fonts

•<FONT COLOR="red" SIZE="2" FACE="Times Roman">

This is the text of line one </FONT>

•<FONT COLOR="green" SIZE="4" FACE="Arial">

Line two contains this text </FONT>

23

Line two contains this text </FONT>

•<FONT COLOR="blue" SIZE="6" FACE="Courier"

The third line has this additional text </FONT>


Tables

<TABLE> table tag

<CAPTION> optional table title

<TR> table row

<TH> table column header

24

<TH> table column header

<TD> table data element


Tables

<TABLE BORDER=1>

<CAPTION>Table Caption</CAPTION>

<TR><TH>Heading1</TH> <TH>Heading2</TH></TR>

<TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR>

25



</TABLE>


<TABLE> Element Attributes

• ALIGN=position -- left, center, right for table

• BORDER=number -- width in pixels of border (including any

cell spacing, default 0)

• CELLSPACING=number -- spacing in pixels between cells,

default about 3

26

default about 3

• CELLPADDING=number -- space in pixels between cell border

and table element, default about 1

• WIDTH=number[%]-- width in pixels or percentage of

page/frame width


Spacing and Padding in Tables

• cellspacing=10

27

• cellpadding=10


<TABLE> Element Attributes

BGCOLOR=color -- background color of table, also valid

for <TR>, <TH>, and <TD>

RULES=value -- which internal lines are shown; values are

none, rows, cols, and all (default)

28

none, rows, cols, and all (default)

EX: <TABLE COLS=“40%, *,*”>

<TABLE ROWS=“*,*”>


<TR> Table Row Attributes

Valid for the table row:

ALIGN -- left, center, right

VALIGN -- top, middle, bottom

29

BGCOLOR -- background color


Cascading Style Sheets

• A powerful way to specify styles and formatting across all

documents in a web site

• Style sheets can be specified inline or as a separate document

• Helps to keep a common look and feel

30

• Helps to keep a common look and feel


CSS

• General form:

selector {property: value} or

31

selector {property1: value1;

property2: value2;

...

propertyn: valuen }


CSS

H1 {text-align: center;

color: blue;

font: Arial, Times New Roman}

P {text-align: left;

32

P {text-align: left;

color: red;

font-family: Tahoma, Arial Narrow;

font-style: italics}


Frames

• Frames help control navigation and display

• <FRAME> attributes include

– FRAMEBORDER – yes or 1 for borders

– FRAMESPACING – width of border

33

– FRAMESPACING – width of border

– BORDERCOLOR – color

– SRC – location of HTML to display in frame

– NAME – destination for TARGET attribute


Frames

– MARGINWIDTH – left/right margins

– MARGINHEIGHT – top/bottom margins

– SCROLLING – yes or 1 adds scroll bar

34

– NORESIZE – yes or 1 disables resizing


EndEnd


Documents

Introduction to HTML - MSCS - Marquette University