basic structure of a web page

8/2/2019 Basic Structure of a Web Page

http://slidepdf.com/reader/full/basic-structure-of-a-web-page 1/14

1

Basic Structure of a Web Page

While this reference aims to provide a thorough breakdown of the various HTMLelements and their respective attributes, you also need to understand how theseitems fit into the bigger picture. A web page is structured as follows.

The Doctype

The first element of the hypertext markup language, which you will find in any

proper Web document (web page), will be a special tag DOCTYPE , which will

include early entry ! DOCTYPE HTML Public . More precisely, DOCTYPE - it is not

unusual tag, and the so-called declaration, because it starts with corner brackets

and affixed immediately followed by an exclamation mark <! . In this article, except

for the declaration called DOCTYPE, we will consider the declaration, which is called

Html comment.

By itself, a DOCTYPE element is used to declare the type of the document and helps

the browser figure out which version Html or XHTML (classification Validator W3C),

it should be based parsing code web page download.

If the document type is specified in the DOCTYPE in accordance with generally

accepted rules, the browser will likely still correctly displays your Web document,

but not for the fact that the same make and Browsers thousands of your

readers.Therefore, DOCTYPE must be present in a Web document (page) and made

sure he must be right.

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

All options DOCTYPE you can look at the relevant page of W3C validator .



2

Pic-1.1

All options DOCTYPE you can look at the relevant page of W3C validator .



3

Document Tree

The tree of the document (document tree) - a scheme for constructing an HTML document,

which shows the relationships between different elements of the page and the order of thenested elements.This scheme helps to navigate this, at first glance, a chaotic mess of HTML

tags.Web document tree helps the developer to write CSS rules and Javascript scripts.Without

going into long and tedious explanation as to why the document tree called a tree, consider an

example - take a simple HTML code:

<html>

<head>

<title>Заголовок страницы</title>

</head>

<body>

<div class="mainWrap">

<h1>Основной заголовок</h1>

<p>абзац текста.</p>

<ul>

<li>пункт 1</li>

<li>пункт 2</li>

</ul>

</div>

<div class="sideBar">

<h2>Второй заголовок</h2>

<p>Текст</p>

</div>

</body>



4

</html>

So see the HTML code unenlightened natives, who have accidentally pressed the view page

source.But the trained eye of a web developer will disassemble it on the shelves, you will see all

levels of nesting and interactions.It will build from the chaos of a clear hierarchy in a tree

(because the scheme is similar to the shape of the tree):

Pic-1.2

Kinship

Between elements of the document tree, there are certain connections. Let us examine them.

The ancestors and descendants

From the schematic representation of the tree, and most of the HTML code, it is clear that someelements are nested in the other. Elements that contain other, are the ancestors (ancestor)with respect to all embedded in it. Attached, in turn, are his descendants (descendant).

For clarity, let us consider one branch of our tree:

For clarity, let us consider one branch of our tree:



5

Pic-1.3

Each parent can have an unlimited number of offspring. Each child will have a number of ancestors, depending on the structure of a tree branch and how it will be located, but in any caseat least one parent will be.

Parents and daughter

The parent (parent) - is the direct ancestor (the ancestor of the first level) element. Conversely,a direct descendant (child of the first level) is called a child of the (child).

Pic-1.4

Each parent can have an unlimited number of daughters. We will only child of a parent.

Parent item are called direct ancestor , and a child element - a direct descendant . This sort of semantic names.



6

Siblings

Siblings (siblings) - a group of two or more elements that have a common parent. The elementsneed not necessarily be the same type, just that they should have a common parent.

Pic-1.5

Related

Adjacent elements (adjacent) - a sister elements that are "in the neighborhood."

Pic-1.6



7

Previous nursing and nursing following

There should be all clear from the very names of the terms. Previous nursing (preceding sibling) -the previous sibling element of the code. In our example, the branch is to be <ul> <p>, for <p> -<h1>, and for <h1> no previous nursing.

Similarly, the next sibling (following sibling): for <h1> - <p>, for <p> - <ul>, for <ul> - no.

Previous and next

Previous element (preceeding) - a previous item on the code, but without the limitations of nursingrelations. For our branches: for it is <ul> <p>, for <p> - <h1>, for <h1> - <div class="mainWrap">.

Similarly, the next element (preceding) has no restrictions sister relationship: for <h1> - <p>, for <p>- <ul>, for <ul> - <li> (first) and so on.

The first and last child

The first child (first child) - this is the first child of a parent in the document tree, and the last (lastchild) - the last one.

Pic-1.7

The root element

The root element (root) - it is the ancestor of all the ancestors, it is the "root" of our documenttree, it is the only element that has no parent, this tag <html> .

Block layout using div tagTwo-column template with a column on the right site

http://www.xiper.net/manuals/html/tags/html.html






8

we create a page with a column on the right.At first we create "the HTML

document tree". It contains the main parts of the HTML document tree.It is shown

in below.

Pic-1.8

Head tag

Tag <head> used to store other items whose purpose - to help the browser to work with

data. Also within the container <head> are meta tags, which are used to store personal

information for browsers and search engines.

For example, the mechanisms of search engines are turning to Meta Tags for site

description, keywords and other data.

The contents of the tag <head> not displayed directly on a web page, except for the

tag <title> a title of a web page.

Inside the container <head> allowed to place the following

items: <base> , <basefont> , <bgsound> , <link> , <meta> , <script> , <style> , <

title> .

In our <head> contains <link> and <meta> tag.



9

Pic-1.9

Link to the External Style Sheet in Your HTML

Once you've written your external style sheet, you need to attach it to your HTML document.

You do this with the <link> tag.

The <link> tag belongs in the head of your HTML document. Use the following attributes to link

to a style sheet:

href="URL of your stylesheet"

rel="stylesheet" type="text/css"

We have an external style sheet named "style6.css".It have to attache to our htlm page using

tag <<link>>.See the Pic-1.9

Title tag

Defines the document title. Element <title> is not part of the document and is not

displayed directly on a web page. On Windows the header text is displayed in the upper left

corner of the browser window (see Figure 1). Use only one tag <title> on the document

and place it in a container <head> .

Pic-1.10

Body tag

Element <body> designed to store the content of web pages (content) that is displayed in thebrowser window. Information that should be displayed in the document, it should be placedinside the container <body> . This information applies to text, images, tags, JavaScript

scripts, etc.

http://webdesign.about.com/od/htmltags/p/bltags_link.htm



http://webdesign.about.com/od/beginningtutorials/a/head_web_pages.htm







10

Tag <body> also used to determine the color of links and text on a web page. This practice

is condemned in HTML 4, and instead to specify the color scheme is recommended to use

styles, applying them to the selector BODY . However, most of the attributes are still

supported by different browsers.

Often, the tag <body> used to host an event handler, for example, onload , which isperformed after the document is finished loading in the current window or frame.

The opening and closing tags <body> on a Web page are not mandatory, but is considered

good practice to use them to determine the beginning and end of HTML-document.

In our body tag we divide into 2 parts. They are –

1.wrapper<<for logo and content>>

2.footer<<for navigator and owner information>>

In wrapper has two parts.They are box1 and box2. The box1 is for logo and navigator for

departments.The box2 is for information of department and sidebar.The box2 is the main

part of the HTML page .It can show all information to see user.

Pic-1.11

The result of the box1 is

http://htmlbook.ru/html/attr/onload






11

Pic-1.12

The part “container” of the box2 –



12

Pic-1.13

The part “sidebar” of the box2-



13

Pic-1.14



14

The part “ footer”

Pic-1.15

basic structure of a web page

Documents