Examples of a web page
Web page consists of several elements including CSS, images, and JavaScript. You can view all of these elements and code by viewing the source code of the web page.
Although the body of a web page is created using HTML, that HTML code can be created using an HTML editor and written by a human or generated using server side scripts or other scripts. Typically a web page generated by a human ends with a .htm or .html file extension. Pages created by a script can end in .cgi, .php, .pl, .p, and other extensions.
Basis of HTML.HTML is a markup language for describing web documents (web pages).
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
An HTML file can be created using a simple text editor
The markup tags tell the Web browser how to display the page
Html Tags
HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a slash before the tag name
The start tag is often called the opening tag. The end tag is often called the closing tag. Web Browsers.
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them. The browser does not display the HTML tags, but uses them to determine how to display the document.
HTML Documents. All HTML documents must start with a type declaration: <!DOCTYPE html>.The HTML document itself begins with <html> and ends with </html>.The visible part of the HTML document is between <body> and </body>.
Exersise 1.
Open Notepad. Type in the following text:
<
!DOCTYPE html>
<html>
<head>
<title>Page
Title</title>
</head>
<body>
<h1>My
First Heading</h1>
<p>My
first paragraph.</p>
</body>
</html>
Save the file as "mypage.htm".
Start your Internet browser. Select "Open" (or "Open Page") in the File menu of your browser. A dialog box will appear. Select "Browse" (or "Choose File") and locate the HTML file you just created - "mypage.htm" - select it and click "Open". Now you should see an address in the dialog box, for example "C:\MyDocuments\mypage.htm". Click OK, and the browser will display the page.
Example Explained
The DOCTYPE declaration defines the document type to be HTML. The <!DOCTYPE> declaration helps the browser to display a web page correctly.
The text between <html> and </html> describes an HTML document. This tag tells your browserthat this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.
The text between <head> and </head> provides information about the document. . Header information is not displayed in the browser window
The text between <title> and </title> provides a title for the document. The title is displayed in your browser's caption.
The text between <body> and </body> describes the visible page content which will be displayed in your browser.
The text between <h1> and </h1> describes a heading
The text between <p> and </p> describes a paragraph
Using this description, a web browser can display a document with a heading and a paragraph.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
Exercise 2.
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
Result:
HTML Links
HTML uses the <a> (anchor) tag to create a link to another document.
An anchor can point to any resource on the Web: an HTML page, an image, a sound file, a movie, etc.
The syntax of creating an anchor:
<
a
href="url">Text to be displayed</a>
The <a> tag is used to create an anchor to link from the href attribute is used to address the document to link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink.
This anchor defines a link to yandex.ru:
<a href="http://www.yandex.ru">This is a link</a>
The line above will look like this in a browser:
Yandex,ru!
Example
<a href="http://www.yandex.ru">This is a link</a>
The link's destination is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.
Exercise 3
<!DOCTYPE html>
<html>
<body>
<a href="http://www.yandex.ru">This is a link</a>
</body>
</html>
HTML Images
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as attributes:
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
<img src="picture.jpg" alt="name of the file" width="104" height="142">
The "alt" attribute tells the reader what he is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image.
H
TML
Text Formatting
HTML defines a lot of elements for formatting output, like bold or italic text.
Text Formatting Tags
T ag |
Description |
<b> |
Defines bold text |
<big> |
Defines big text |
<em> |
Defines emphasized text |
<i> |
Defines italic text |
<small> |
Defines small text |
<strong> |
Defines strong text |
<sub> |
Defines subscripted text |
<sup> |
Defines superscripted text |
|
|
E
xercise
4:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
<p><i>This text is italic</i>.</p>
<p><em>This text is emphasized</em>.</p>
<p>HTML <small>Small</small> Formatting</p>
<p>HTML <mark>Marked</mark> Formatting</p>
<p>My favorite color is <del>blue</del> red.</p>
<p>My favorite <ins>color</ins> is red.</p>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>supscripted</sup> text.</p>
</body>
</html>
Rezult:
H TML Backgrounds.
A good background can make a Web site look really great.
Backgrounds
The <body> tag has two attributes where you can specify backgrounds. The background can be a color or an image.
Bgcolor
The bgcolor attribute sets the background to a color. The value of this attribute can be a hexadeci- mal number, an RGB value, or a color name.
<body bgcolor="#000000"><body bgcolor="rgb(0,0,0)"><body bgcolor="black">
The lines above all set the background color to black
Background
The background attribute sets the background to an image. The value of this attribute is the URL of the image you want to use. If the image is smaller than the browser window, the image will repeat itself until it fills the entire browser window.
<
body
background="clouds.gif">
<body background="http://www.w3schools.com/clouds.gif">
The URL can be relative (as in the first line above) or absolute (as in the second line above).
Practical exercises:
HTML text exercises
Print your name in green.
Print the numbers 1 - 10, each number being a different color.
Prints your name in a Tahoma font.
Print a paragraph with 4 - 5 sentences. Each sentence should be a different font.
Print a paragraph that is a description of a book, include the title of the book as well as its author. Names and titles should be underlined, adjectives should be italicized and bolded.
Print your name to the screen with every letter being a different heading size.
HTML text formatting exercises
Print the squares of the numbers 1 - 20. Each number should be on a separate line, next to it the number 2 superscripted, an equal sign and the result. (Example: 102 = 100)
Prints 10 names with a line break between each name. The list should be alphabetized, and to do this place a subscripted number next to each name based on where it will go in the alphabetized list. (Example: Alan1). Print first, the unalphabetized list with a subscript number next to each name, then the alphabetized list. Both lists should have an <h1> level heading.[
Print two paragraphs that are both indented using the command.[
Print two lists with any information you want. One list should be an ordered list, the other list should be an unordered list.
Prints an h1 level heading followed by a horizontal line whose width is 100%. Below the horizontal line print a paragraph relating to the text in the heading.
Print some preformatted text of your choosing. (hint: use the <pre> tag)
Print a long quote and a short quote. Cite the author of each quote.
Print some deleted and inserted text of your choosing.
Print a definition list with 5 items.
Print two addresses in the same format used on the front of envelopes (senders address in top left corner, receivers address in the center).
Print ten acronyms and abbreviations of your choosing, each separated by two lines. Specify the data that the abbreviations and acronyms represent.
HTML link exercises
Create some links to various search engines (google, yahoo, altavista, lycos, etc).
Create links to five different pages on five different websites that should all open in a new window. [
Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. [
Create a page with a link at the bottom of it that when clicked will jump all the way to the top of the page. [
Create a page with a link at the top of it that when clicked will jump all the way to the bottom of the page. At the bottom of the page there should be a link to jump back to the top of the page.
HTML image exercises
Display five different images. Skip two lines between each image. Each image should have a title.
Display an image that has a border of size 2, a width of 200, and a height of 200.
Display an image that when clicked will link to a search engine of your choice (should be opened in a new window).
Control questions:
What is computer network?
How many topologies are in computer network?
Advantages and disadvantages of star network?
Advantages and disadvantages of bus network?
What network OS do you know?
Name Internet services.
What is Web-page?
What is HTML?
Structure of HTML document.
List of recommended references
June J. Parsons and Dan Oja, New Perspectives on Computer Concepts 16th Edition - Comprehensive, Thomson Course Technology, a division of Thomson Learning, Inc Cambridge, MA, COPYRIGHT © 2014.
Lorenzo Cantoni (University of Lugano, Switzerland) James A. Danowski (University of Illinois at Chicago, IL, USA) Communication and Technology, 576 pages.
Craig Van Slyke Information Communication Technologies: Concepts, Methodologies, Tools, and Applications (6 Volumes). ISBN13: 9781599049496, 2008, Pages: 4288
Brynjolfsson, E. and A. Saunders (2010). Wired for Innovation: How Information Technology Is Reshaping the Economy. Cambridge, MA: MIT Press
Kretschmer, T. (2012), "Information and Communication Technologies and Productivity Growth: A Survey of the Literature", OECD Digital Economy Papers, No. 195, OECD Publishing.
Laboratory work №10
THE USE OF HARDWARE AND SOFTWARE FOR KEY GENERATION. THE USE OF ELECTRONIC SIGNATURE AND ENCRYPTION WHEN EXCHANGING MESSAGES BY E-MAIL.