Scribd
Upload
16 views

Chapter 2 - Part 1

Internet programing 2

Uploaded by

Dagim Mengesha
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

Chapter 2 - Part 1

Internet programing 2

Uploaded by

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

Internet Programming I

(CoSc3121)
Chapter 2 (Part I)
Web Page Development Using HTML

Prepared By: Helawe Behailu April, 2022


Content
• What is HTML
• Creating HTML documents
• How to specify colors?
• Text Formatting in HTML
What is HTML (cont...)
• HTML stands for (Hypertext Markup Language)
• A markup language is a computer language that uses tags to define
elements within a document. It is human-readable, meaning markup
files contain standard words, rather than typical programming syntax.
While several markup languages exist, the two most popular are
HTML and XML.
What is HTML (cont...)
• HTML stands for "Hypertext Markup Language“. It is the language used to create
webpages. "Hypertext" refers to the hyperlinks that an HTML page may contain.
"Markup language" refers to the way tags are used to define the page layout and
elements within the page.
• An open standard
• Developed by the World Wide Web Consortium (W3C)

<html>
<head>
<title>HTML Page</title>
</head>
<body>
<p>This is an example of a paragraph in HTML.</p>
</body>
</html>
What is HTML (cont...)
• Static—it is only display.
• Use other technologies to add dynamic function:
• Client-side (browser) scripting languages (JavaScript)
• Server-side programs (PHP, Java servlets)

• HTML is a lightweight file format.


• Size of file containing just “Hello World!”:

File Type Size


PDF 4,915 bytes
MS Word 19,456 bytes
Postscript 11,274 bytes
HTML 12 – 50 bytes
What is HTML (cont...)
• HTML5
• is the latest evolution of the standard that defines
HTML. The term represents two different concepts.
It is a new version of the language HTML, with new
elements, attributes, and behaviors, and a larger set
of technologies that allows the building of more
diverse and powerful websites and applications. This
set is sometimes called HTML5 & friends and often
shortened to just HTML5.
• HTML5 is a markup language used for structuring
and presenting content on the World Wide Web. It is
the fifth and current major version of the HTML
standard.
Creating HTML documents
• What are HTML tags?
• When a web browser displays a page, it reads from a text file, and looks for
special codes or "tags" that are marked by the < and > signs. The general
format for a HTML tag is: <tag name>string of text</tag name>
• Example:
<h3>What are HTML tags?</h3>
This tag tells a web browser to display the text ‘What are HTML tags?’ in the
style of header level 3. HTML tags may tell a web browser to bold the text,
italicize it, make it into a header, or make it be a hypertext link to another web
page.
Creating HTML documents (cont...)
• What are HTML tags? (cont...)
• It is important to note that the ending tag, </tag name> contains the "/" slash
character. This "/" slash tells a web browser to stop tagging the text. Many
HTML tags are paired this way. If you forget the slash, a web browser will
continue the tag for the rest of the text in your document, producing
undesirable results.
• Unlike computer programming, if you make a typographical error in HTML you
will not get a "bomb" or "crash" the system; your web page will simply look,
well... wrong.
Creating HTML documents (cont...)
• An HTML document contains two distinct parts, the head and the body. The head
contains information about the document that is not displayed on the screen. The
body then contains everything else that is displayed.
• The basic structure then of any HTML page is:
<html>
<head>
** [header info used by some web servers, not displayed] **
</head>

<body>
** [all the HTML for display] **
: :
: :
</body>
</html>
Creating HTML documents (cont...)
• <HTML>……</HTML>
• These tags begin and end an HTML document
• Used to bracket an entire HTML document.
• Optional for most browsers.
• Attributes:
• lang = language code
• Language code indicates the primary language of the document.
• en = English
Creating HTML documents (cont...)
• <HEAD >……</HEAD>
• These tags are in the beginning of the document.
• Important information is stored in-between these tags including:
title, meta-data, styles, and programming scripts.
• Used to provide information about a web page.
• Nests within itself other tags like:
<base>, <meta> and <title>
Creating HTML documents (cont...)
• <base>
• Attribute: href = url
• Specifies the base pathname for all relative URLs in the document.
• No end tag.
• <meta>
• Used to provide information about a document.
• Keywords or descriptions to aid search engines.
• < title >……</ title >
• These tags are in-between the HEAD tags and contain the text that
appears in the title of the webpage.
• Usually appears on the title bar of the browser window.
Creating HTML documents (cont...)
• <BODY>…..</BODY>
• alink = color
• Sets the color of active links.
• link = color
• Sets the default color for all the links in a document.
• vlink = color
• Sets the color for the visited links.
• bgcolor = color
• Sets the color for the entire page.
Creating HTML documents (cont...)
• After you wrote your code on any text-file editor tool, save it with an
extension of htm or html.
• And open it with any browser. Your browser will display the contents
based on what you (the programmer) tell it to.
How to specify colors?
1. By specifying the color name.
• Some of the colors that are supported by browsers are:
aqua black blue fuchsia
gray green lime maroon
Navy olive purple red
Silver teal yellow white
• Many other colors are possible.
• Example:
<body text=“white”>
<body bgcolor=“yellow”>
How to specify colors? (cont...)
2. By specifying the red, green, blue or RGB components.
• Each color encoded in 8 bits.
• 00 means that the color is turned off; FF means fully turned on.
• Example:
<body text=“#FFFFFF” bgcolor=“#0000FF”>
Text Formatting in HTML
Paragraphs and Headings
• <Hn> ……. </Hn>
• Used to generate headings, 1 ≤ n ≤ 6.
• Six different levels of headings.
• <H1> is the largest, <H6> is the smallest.
• <P>
• Paragraph marker, used to separate text into paragraphs.
• End tag </P> is optional.
• A series of paragraph tags <p><p>…<p> with no intervening text is treated as
a single <p>.
Text Formatting in HTML (cont...)
• <BR>
• Used to indicate that the text following <BR> should begin on the
next line.
• The amount of line spacing is less than that of a <P> break.
• Example:
This is the first line. <br>
This is the second line. <br>
This is the third.
Text Formatting in HTML (cont...)
• <HR>
• Produces a horizontal line, which can be used to delimit sections.
• Length of the line can be specified.
• Examples:
<hr>
<hr size= "20"> [ noshade option possible ]
<hr width= "75%">
<hr align="right" width=120>
• Across full width of browser, 20 pixels thick, 75% of available page width,
and 120 pixels right-justified.
Text Formatting in HTML (cont...)
• <address> ……. </address>
• Supplies the contact information of the author.
• Generally formatted in italics, with a line break above and below.
• Example
<address>
Mr X Y<br>
Dept. of Information Systems <br>
Bahir Dar University <br>
Email: [email protected]
</address>
Text Formatting in HTML (cont...)
• <b> ……. </b>
• Displays the enclosed text in bold.
• <i> ……. </i>
• Displays the enclosed text in italics.
• <cite> ……. </cite>
• Tells the browser that this is a citation. Usually displayed in italics.
Text Formatting in HTML (cont...)
• <pre> ……. </pre>
• Allows browser to display carefully laid out text.
• Used to display program listings.
• Example:
<pre>
main()
{
int i, j;
abc ();
}
</pre>
Text Formatting in HTML (cont...)
• <sub> ……. </sub>
• Displays the enclosed text as subscript.
• <sup> ……. </sup>
• Displays the enclosed text as superscript.
• <font> ……. </font>
• Specifies the style of the enclosed text.
• Attributes:
• color = color name
• face = typeface
• size = value [1 to 7; 3 is the default]
Text Formatting in HTML (cont...)
• <center> ……. </center>
• Centers the enclosed elements horizontally on the page.
• <P align=option> ……. </P>
• Used to align a paragraph.
• Option can be left, right or center.
Text Formatting in HTML (cont...)
Example 1
<html>
<head>
<title> Title of the Document </title>
</head>
<body text="white" bgcolor= "blue">
This is the content of the document.
This is an <i> italic </i> font,
and this is <b> bold </b>.
</body>
</html>
Text Formatting in HTML (cont...)
Example 2
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1 align="center">My First Webpage</h1>
<p>Welcome to my first web page. I am writing this page using a text editor and plain old
html.</p>
<p>By learning html, I'll be able to create web pages like....<br>
which I am of course.</p>
</body>
</html>
Text Formatting in HTML (cont...)
Example 3
<html>
<head><title>Demonstration of Headings </title></head>
<body text="#FFFFFF" bgcolor="#0000FF">
<h1>This is a first level heading. </h1>
<h2>The second level</h2>
<h3>The third level</h3>
<h4>Fourth level. </h4>
<h5>Fifth level.</h5>
<h6>And, finally, the sixth .</h6>
A small amount of plain non-heading text.
</body>
</html>
Text Formatting in HTML (cont...)
Example 4
<html>
<head><title>Paragaph Aligning</title></head>
<body text=white bgcolor=green>
<h3>
<P ALIGN=CENTER> This paragraph will be aligned
at the center. Even as the browser window
size changes, the alignment remains the same. </P>
<P ALIGN=LEFT>This demonstrates left alignment. </P>
<P ALIGN=RIGHT>How about aligning by the right margin? </P>
</h3>
</body>
</html>
Text Formatting in HTML (cont...)
Example 5
<html>
<head><title>Layout Features 1</title></head>
<body text=yellow bgcolor=blue>
<h2> <pre>
begin
if (a > b)
then max := a;
else max := b;
end;
</pre> </h2>
<hr size=8 width=50%>
<hr>
<hr size=20 width="75%" noshade>
</body>
</html>
Text Formatting in HTML (cont...)
Example 6
<html>
<head><title>Layout Features 2</title></head>
<body text=yellow bgcolor=blue>
<h3>Extended Quotations</h3>
<blockquote>
<P>This is the first paragraph within
the BLOCKQUOTE environment. </P>
<P>Another paragraph starts here. </P>
We type some text here without explicitly
giving paragraph break.
</blockquote>
</body>
</html>
Text Formatting in HTML (cont...)
Example 7
<html>
<head><title> Superscript and Subscript </title></head>
<body text=white bgcolor=blue>
<h1> y = x <sup> 3 </sup> + 2 x <sup> 2 </sup> + 4 </h1>
<br>
<h2> W <sub> total </sub> = x <sup> 2 </sup> - 5 </h2>
</body>
</html>
END
of Part 1

You might also like