Hi, today we'll learn about website Structures, We come across all kinds of documents every day of our lives. Newspapers, insurance forms, shop catalogs... the list goes on.
Many web pages act like electronic versions of these documents.
For example, newspapers show the same stories in print as they do on websites you can apply for insurance over the web and stores have online catalogs and
e-commerce facilities. In all kinds of documents structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document. So, in order to learn how to write web pages, it is very important to understand how to structure documents. In this topic you will:
- Write your first web page
*How pages use structure
- Think about the stories you read in a newspaper: for each story, there will be a headline, some text, and possibly some images. If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved. Structure helps readers understand the stories in the newspaper.
- The structure is very similar when a news story is viewed online (although it may also feature audio or video). This is illustrated on the right with a copy of a newspaper alongside the corresponding article on its website.
- Now think about a very different type of document an insurance form. Insurance forms often have headings for different sections, and each section contains a list of questions with areas for you to fill in details or check boxes to tick. Again, the structure is very similar online.
*Structuring word documents
- The use of headings and subheadings in any document often reflects a hierarchy of information.
For example, a document might start with a large heading, followed by an introduction or the most important information.
-This might be expanded upon under subheadings lower down on the page. When using a word processor to create a document, we separate out the text to give it structure. Each topic might have a new paragraph, and each section can have a heading to describe what it covers.
-On the right, you can see a simple document in Microsoft Word. The different styles for the document, such as different levels of heading, are shown in the drop down box. If you regularly use Word, you might have also used the formatting toolbar or palette to do this.
*HTML Describes The Structure Of pages
- In the browser window you can see a web page that features exactly the same content as the Word document. To describe the structure of a web page, we add code to the words we want to appear on the page.
- You can see the HTML code for this page below. Don't worry about what
the code means yet. We start to look at it in more detail on the next
lecture.
(Note that the HTML code is in blue, and the text you see on screen
is in black)
<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of
the page. And if the page is a long one it might
be split up into several sub-headings.<p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help
you follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level
headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</body>
</html>
The HTML code (in blue) is made up of characters that live inside angled brackets these are called HTML elements. Elements are usually made up of two tags:
an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags.
Many web pages act like electronic versions of these documents.
For example, newspapers show the same stories in print as they do on websites you can apply for insurance over the web and stores have online catalogs and
e-commerce facilities. In all kinds of documents structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document. So, in order to learn how to write web pages, it is very important to understand how to structure documents. In this topic you will:
- See how HTML describes the structure of a web page
- Learn how tags or elements are added to your document- Write your first web page
*How pages use structure
- Think about the stories you read in a newspaper: for each story, there will be a headline, some text, and possibly some images. If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved. Structure helps readers understand the stories in the newspaper.
- The structure is very similar when a news story is viewed online (although it may also feature audio or video). This is illustrated on the right with a copy of a newspaper alongside the corresponding article on its website.
- Now think about a very different type of document an insurance form. Insurance forms often have headings for different sections, and each section contains a list of questions with areas for you to fill in details or check boxes to tick. Again, the structure is very similar online.
*Structuring word documents
For example, a document might start with a large heading, followed by an introduction or the most important information.
-This might be expanded upon under subheadings lower down on the page. When using a word processor to create a document, we separate out the text to give it structure. Each topic might have a new paragraph, and each section can have a heading to describe what it covers.
-On the right, you can see a simple document in Microsoft Word. The different styles for the document, such as different levels of heading, are shown in the drop down box. If you regularly use Word, you might have also used the formatting toolbar or palette to do this.
*HTML Describes The Structure Of pages
- In the browser window you can see a web page that features exactly the same content as the Word document. To describe the structure of a web page, we add code to the words we want to appear on the page.
- You can see the HTML code for this page below. Don't worry about what
the code means yet. We start to look at it in more detail on the next
lecture.
(Note that the HTML code is in blue, and the text you see on screen
is in black)
<html>
<body>
<h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of
the page. And if the page is a long one it might
be split up into several sub-headings.<p>
<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help
you follow the structure of what is being written.
There may even be sub-sub-headings (or lower-level
headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</body>
</html>
The HTML code (in blue) is made up of characters that live inside angled brackets these are called HTML elements. Elements are usually made up of two tags:
an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags.
Comments
Post a Comment