Scribd
Upload
154 views

Basic Structure of A Web Page

The document discusses the basic structure of a web page, including: 1) The DOCTYPE declaration which indicates the document type and helps browsers render the page correctly. 2) The document tree which shows the hierarchical relationships between HTML elements and helps with writing CSS and JavaScript. 3) Key terms related to elements in the document tree such as parents, children, siblings, ancestors and descendants. 4) Common HTML tags like <head>, <body>, <title>, <link> and <meta> and how they are used to structure a web page.

Uploaded by

Wai Phyo Aung
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
154 views

Basic Structure of A Web Page

The document discusses the basic structure of a web page, including: 1) The DOCTYPE declaration which indicates the document type and helps browsers render the page correctly. 2) The document tree which shows the hierarchical relationships between HTML elements and helps with writing CSS and JavaScript. 3) Key terms related to elements in the document tree such as parents, children, siblings, ancestors and descendants. 4) Common HTML tags like <head>, <body>, <title>, <link> and <meta> and how they are used to structure a web page.

Uploaded by

Wai Phyo Aung
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Basic Structure of a Web Page

While this reference aims to provide a thorough breakdown of the various HTML elements and their respective attributes, you also need to understand how these items 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.

<!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 .

Pic-1.1

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

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 the nested 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>

</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 some elements 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:

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 case at 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.

Siblings
Siblings (siblings) - a group of two or more elements that have a common parent. The elements need 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

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 nursing relations. 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 (last child) - 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 document tree, it is the only element that has no parent, this tag <html> .

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

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.

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 the browser window. Information that should be displayed in the document, it should be placed inside the container <body> . This information applies to text, images, tags, JavaScript scripts, etc. 9

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 is performed 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

10

Pic-1.12

The part container of the box2

11

Pic-1.13

The part sidebar of the box2-

12

Pic-1.14

13

The part footer

Pic-1.15

14

You might also like