Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
5 views

Week 7 - HTML Basics 1

Uploaded by

tincan956
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Week 7 - HTML Basics 1

Uploaded by

tincan956
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

HNDIT11062 –

Web Development

Week 7: HTML Basics


Introduction to HTML
Contents
• Getting Started..
• What is HTML?
• How to create and View an HTML document?
• Basic HTML Document Format
• The HTML Basic tags

3
Definitions
 WWW – World Wide Web.

 HTML – HyperText Markup Language


The language of Web Pages on the
World Wide Web.
HTML is a text formatting language.

 URL – Uniform Resource Locator.

 Browser – A software program which is used to


show web pages.

4
What is HTML?
• HTML allows you to describe the content of a
website.
– Headers
– Paragraphs
– Images
– Hyperlinks
• HTML also allows you to specify relationships
between elements and group them.
 “Normal text” surrounded by bracketed tags
that tell browsers how to display web pages

 Pages end with “.htm” or “.html”

 HTML Editor – A word processor that has


been specialized to make the
writing of HTML documents
more effortless.

6
Getting Started
• Make a .html file using a text editor (even
Notepad can do it)
• Open it with your browser.
– Usually, your default browser is already configured
to open .html files.
– So just click the file.
Syntax
• HTML revolves around tags.
• Each tag has a special meaning to the browser.
• Tags are keywords surrounded by brackets <>.
They usually come in pairs: opening and closing
tags.
• Examples:
– <b>content</b>
• Will bold the word “content”
– <p>more content</p>
• Defines a paragraph
Tags
 Codes enclosed in brackets
 Usually paired
E.g.
<TITLE>My Web Page</TITLE>
 Not case sensitive
E.g.
<TITLE> = <title> = <Title>
9
Choosing Text Editor
 There are many different programs that you can use to create
web documents.
 HTML Editors enable users to create documents quickly and
easily by pushing a few buttons. Instead of entering all of the
HTML codes by hand.
 These programs will generate the HTML Source Code for you.
 HTML Editors are excellent tools for experienced web
developers; however; it is important that you learn and
understand the HTML language so that you can edit code and
fix “bugs” in your pages.
 For this Course, we will focus on using the standard Microsoft
Windows text editors, NotePad.
10
Starting NotePad
NotePad is the standard text editor that come
with the Microsoft windows operating system.
To start NotePad follow the steps bellow:

 Click on the “Start” button located on your


Windows task bar.
 Click on “Programs” and then click on the
directory menu labeled “Accessories”.
 Locate the shortcut “NotePad” and click the
shortcut once.
11
HTML Page Creation & Editing
In this chapter you will learn to create HTML
pages with a standard text editor.
Objectives
Upon completing this section, you should be
able to
1. Choose a Text Editor.
2. Create a Basic Starting Document.
3. Understand and set Document Properties.
4. View Your Results in a Browser.
12
Creating a Basic Starting Document
<HTML>
<HEAD>
<TITLE> Sri Lanka Institute of Advanced
Technological Education </TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML>

13
Creating a Basic Starting Document
 The HEAD of your document point to above window
part.
 The TITLE of your document appears in the very top
line of the user’s browser. If the user chooses to
“Bookmark” your page or save as a “Favorite”; it is
the TITLE that is added to the list.

 The text in your TITLE should be as descriptive as


possible because this is what many search engines,
on the internet, use for indexing your site.
14
Setting Document Properties

 Document properties are controlled by


attributes of the BODY element.

 For example,
 there are color settings for the background
color of the page, the document’s text and
different states of links.

15
Color Codes
• Colors are set using “RGB” color codes, which are,
represented as hexadecimal values.
• Each 2-digit section of the code represents the amount, in
sequence, of red, green or blue that forms the color.
E.g. A RGB value with 00 as the first two digits has no red
in the color.

Main Colours

16
16 Basic Colors

17
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
15. ORANGE 15. #FF7F00
18
The Body Element
• The BODY element of a web page is an important
element in regards to the page’s appearance.
• This element contains information about the page’s
background color, the background image, as well as the
text and link colors.
E.g.
TEXT="#RRGGBB" to change the color of all the text on the page
(full page text color)
• Here are the attributes of the BODY tag to control all
the levels:
bgcolor link
Background vlink
text alink 19
Background Color
 It is very common to see web pages with their
background color set to white or some other
colors.
 To set your document’s background color, you
need to edit the <BODY> element by adding
the BGCOLOR attribute.
E.g.
<BODY BGCOLOR=“#FFFFFF”></BODY>

20
TEXT Color
• The TEXT attribute is used to control the color of
all the normal text in the document.
• The default color for text is black.
E.g.
The TEXT attribute would be added as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”> Document's content. </BODY>
In this example the document’s page color is
white and the text would be red.
21
Using Image Background
 The BODY element also gives you ability of setting
an image as the document’s background.

 An example of a background image’s HTML code is


as follows:

<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”> Document's content. </BODY>

22
LINK, VLINK, and ALINK
These attributes control the colors of the different link states:
1. LINK – initial appearance – default = Blue.
2. VLINK – visited link – default = Purple.
3. ALINK – active link being clicked – default = Yellow.

The Format for setting these attributes is:


<BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000”
LINK=“#0000FF”
VLINK=“#FF00FF”
ALINK=“FFFF00”> Document's content. </BODY> 23
Headings, Paragraphs, Breaks & Horizontal Rules

In this chapter you will add headings to your page, insert


paragraphs, add some breaks, and add horizontal rules.

Objectives
Upon completing this section, you should be able to
1. List and describe the different Heading elements.
2. Use Paragraphs to add text to a document.
3. Insert breaks where necessary.
4. Add a Horizontal Rule.

24
Headings, <Hx> </Hx>
• Inside the BODY element, heading elements H1
through H6 are generally used for major divisions of
the document.
• Headings are permitted to appear in any order, but
you will obtain the best results when your
documents are displayed in a browser if you follow
these guidelines:

1. H1: should be used as the highest level of heading, H2 as


the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should not
appear after an H1, unless there is an H2 between them.

25
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
Heading 1
<H2> Heading 2 </H2> Heading 2
<H3> Heading 3 </H3>
<H4> Heading 4 </H4> Heading 3
<H5> Heading 5 </H5> Heading 4
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6
</HTML>

26
Paragraphs, <P> </P>
 Paragraphs allow you to add text to a
document in such a way that it will
automatically adjust the end of line to suite
the window size of the browser in which it is
being displayed. Each line of text will stretch
the entire length of the window.

27
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE> Heading 1
Paragraph 1,….
</HEAD>
<BODY></H1> Heading 1 </H1> Heading 2
<P> Paragraph 1, ….</P> Paragraph 2,….
<H2> Heading 2 </H2>
<P> Paragraph 2, ….</P>
Heading 3
Paragraph 3,….
<H3> Heading 3 </H3>
<P> Paragraph 3, ….</P> Heading 4
Paragraph 4,….
<H4> Heading 4 </H4>
<P> Paragraph 4, ….</P> Heading 5
Paragraph 5,….
<H5> Heading 5 </H5>
Heading 6
<P> Paragraph 5, ….</P> Paragraph 6,….
<H6> Heading 6</H6>
<P> Paragraph 6, ….</P>
</BODY></HTML> 28
Break, <BR>
 Line breaks allow you to decide where the text will
break on a line or continue to the end of the window.
 A <BR> is an empty Element, meaning that it may
contain attributes but it does not contain content.
 The <BR> element does not have a closing tag.

29
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR> Line 2
Line 2 <BR> Line 3 <BR>…. Line 3
</P> ….
</BODY>
</HTML>

30
Horizontal Rule, <HR>
 The <HR> element causes the
browser to display a horizontal line
(rule) in your document.
 <HR> does not use a closing tag,
</HR>.

31
Horizontal Rule, <HR>
Attribute Description Default Value
Height of the rule in
SIZE 2 pixels
pixels
Width of the rule in
WIDTH pixels or percentage of 100%
screen width
Draw the rule with a Not set
NOSHADE flat look instead of a
3D look (3D look)

Aligns the line (Left,


ALIGN Center
Center, Right)
Sets a color for the rule
COLOR Not set
(IE 3.0 or later)

32
Horizontal Rule, <HR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
Heading 1
<H1> Heading 1 </H1> Paragraph 1,….
<P>Paragraph 1, <BR> Line 2
Line 2 <BR> _________________________
<HR>Line 3 <BR> __
</P> Line 3
</BODY>
</HTML>
33
Character Formatting
In this chapter you will learn how to enhance your page with
Bold, Italics, and other character formatting options.
Objectives
Upon completing this section, you should be able to
1. Change the color and size of your text.
2. Use Common Character Formatting Elements.
3. Align your text.
4. Add special characters.
5. Use other character formatting elements.

34
Bold, Italic and other Character Formatting
Elements
 <FONT SIZE=“+2”> Two sizes bigger</FONT>
 The size attribute can be set as an absolute value from 1 to 7 or as a
relative value using the “+” or “-” sign. Normal text size is 3 (from -2
to +4).
 <B> Bold </B>
 <I> Italic </I>
 <U> Underline </U>
 Color = “#RRGGBB” The COLOR attribute of the FONT element. E.g.,
<FONT COLOR=“#RRGGBB”>this text has color</FONT>
 <PRE> Preformatted </PRE> Text enclosed by PRE tags is displayed
in a mono-spaced font. Spaces and line breaks are supported
without additional elements or special characters.
35
Bold, Italic and other Character Formatting
Elements

• <EM> Emphasis </EM> Browsers usually display this


as italics.
• <STRONG> STRONG </STRONG> Browsers display
this as bold.
• <TT> TELETYPE </TT> Text is displayed in a mono-
spaced font. A typewriter text, e.g. fixed-width font.
• <CITE> Citation </CITE> represents a document
citation (italics). For titles of books, films, etc.
Typically displayed in italics. (A Beginner's Guide to
HTML)

36
Bold, Italic and other Character Formatting
Elements
<P> <FONT SIZE=“+1”> One Size One Size Larger - Normal – One Size
Larger </FONT> - Normal – Smaller
<FONT SIZE=“-1”> One Size Smaller Bold - italics - Underlined -
</FONT> <BR> Colored
<B> Bold</B> - <I> italics</I> - <U> Emphasized - Strong - Tele Type
Underlined </U> -
<FONT COLOR=“#FF0000”> Colored
</FONT> <BR>
<EM> Emphasized</EM> -
<STRONG> Strong </STRONG> -
<TT> Tele Type </TT> <BR>

37
Alignment
 Some elements have attributes for alignment
(ALIGN) e.g. Headings, Paragraphs and
Horizontal Rules.
 The Three alignment values are : LEFT, RIGHT,
CENTER.
 <CENTER></CENTER> Will center elements.

38
Alignment

 <DIV ALIGN=“value”></DIV> Represents a


division in the document and can contain
most other element type. The alignment
attribute of the DIV element is well supported.
 <TABLE></TABLE> Inside a TABLE, alignment
can be set for each individual cell.

39
Special Characters & Symbols
 These Characters are recognized in HTML as they
begin with an ampersand and end with with a semi-
colon e.g. &value; The value will either be an entity
name or a standard ASCII character number. They are
called escape sequences.
 The next table represents some of the more
commonly used special characters. For a
comprehensive listing, visit the W3C’s section on
special characters at:
http://www.w3.org/MarkUp/HTMLPlus/htmlplus_13.html

40
Special Characters & Symbols
Special Entity Special Entity
Character Name Character Name
Ampersand &amp; & Greater-than &gt; >
sign
Asterisk &lowast; Less-than sign &lt; <
∗∗
Cent sign &cent; ¢ Non-breaking &nbsp;
space
Copyright &copy; © Quotation &quot; "
mark
Fraction one &frac14; Registration &reg; ®
qtr ¼ mark
Fraction one &frac12; Trademark &trade;
41
half ½ sign ™
Special Characters & Symbols
• Additional escape sequences support accented
characters, such as:
• &ouml;
– a lowercase o with an umlaut: ö
• &ntilde;
– a lowercase n with a tilde: ñ
• &Egrave;
– an uppercase E with a grave accent: È
NOTE: Unlike the rest of HTML, the escape sequences
are case sensitive. You cannot, for instance, use &LT;
instead of &lt;.
42
Additional Character Formatting Elements

 <STRIKE> strike-through text</STRIKE>


DEL is used for STRIKE at the latest browsers
 <BIG> places text in a big font</BIG>
 <SMALL> places text in a small font</SMALL>
 <SUB> places text in subscript position </SUB>
 <SUP> places text in superscript style position
</SUP>

43
Example
<P><STRIKE> strike-through text </STRIKE></BR>

<BIG>places text in a big font </BIG><BR>

<SMALL> places text in a small font</SMALL><BR>

<SUB> places text in subscript position </SUB>


Normal
<SUP> places text in superscript style position </SUP><BR>
</P>

44
HTML <marquee> tag

The HTML <marquee> tag is used for scrolling


piece of text or image displayed either
horizontally across or vertically down your
web site page depending on the settings.
E.g.
<marquee>This is basic example of marquee
</marquee>

You might also like