Html5documentstandardscheme

IWST#3

Determination of requirements to development "convenient in application" the Web site

                                                         MADE BY: MUKHAMADIN GULNAZ

MAJOR:CTOS-102k

Determination of requirements to development "convenient in application" the Web site

HTML language

To publish information for widespread distribution, you must have a language understood by all computers. Such language, used on the World Wide Web, is called HTML (Hyper Text Markup Language). HTML is a set of fairly simple commands, which are inserted into the source text of the document and allow control the representation of the document. Thus, the text created with a text editor, and then saved in HTML format becomes aWeb-page/sites (HTML-document) after adding HTML language commands.Current version – HTML 5.

CSS language.

Cascading Style Sheets - a language for describing the appearance of HTML-documents. Simply put, CSS language is designed to give the required appearance of HTML-documents. The purpose of CSS was to separate the description of the logical structure of the web page from her appearance. By using CSS web developer may specify the pages to separate its components and different typefaces and font sizes, colors elements padding elements from each other, arrangement of the individual blocks on the page, etc.Current version – CSS 3.

HTML main elements:

Descriptor (tag) - the main element of coding adopted in the HTML standard. Almost everything depends on the tags, they serve to draw attention to particular commands in a document, thus making it clear for the browser what you want to select, where to display graphics and which hyperlinks are. Tags are allocatedwith angle brackets (<>). Tags can be single or paired. Forthe paired one it is necessary to have a an opening tag <tag> (most often with the option and its value) and a closing tag</ tag>.

NOTE: Tags can be written in any case (uppercase or lowercase letters).

Container - descriptor pair consisting of opening and closing tags <tag> ... </ tag>. Containers are designed to store certain information, such as text or other HTML-tags. HTML-document element - a container along with its contents.

Types of web sites:

Initially, the only technology that allows create websites and web pages, was html technology. However, such pages and sites were poor looking and lacked in interactivity, so in a short time that has elapsed from the start of the mass distribution of the Internet, began to be used numerous complementary technologies and languages.

· Static websites and web pages. Static sites and Web pages - are sites made by the classical

html technology. Web pages of such sites are written entirely in the language of html and have the extension *.htm or *.html. They are called static because, gaining a certain address (URL), corresponding site or a particular page, you will always see the same content. This is because the static html-pages uploaded on the server, and at your request the server simply picks them up and sends you to the browser in without any changing.

Static sites have their both pros and cons. Advantages - the ease of creating and undemanding to the hardware resources. Static sites do not require the support of scripts and databases, and can be placed on any hosting absolutely, and they will not cause almost no load on the server, and they do not have a problem when the site slows down or produces a variety of failures for a large influx of visitors. Static sites can include graphics, animation, CSS and javascript, they are great for providing information to users, which should not be vary considerably over time. The main disadvantage of static websites is the lack of interactivity. In addition, such sites are difficult in changing information, page appearance, and design.

· Dynamic websites and web pages. Dynamic pages do not existin a constant kind in theserver and generated by using scripts. The content and form of the dynamic pages with the same address may be completely different depending on various conditions - for example, depending on particular user’s time, current requests, etc. Web pages scripts can be written in different languages. Frequently used Web programming languages are, for example, php, perl, asp, etc. These sites can provide users with interactivity, to introduce different requests and search information within the sites, send and maintain their own information and carry out communication with other users (such as guest books, forums, etc.) and many other features. In addition, maintenance and updating of these sites much are easier. Cons of dynamic sites is that they require support for additional technologies, creating an increased load on the server, they are more difficult to optimize, in addition, scripts usage on the site is a potential threat to security.

How to create html document:

1. Create file using any text editor (except Microsoft Word), notepad for instance.

2. Fulfill your document with content and implementation of html tags.

3. Save your text document as “*.html” or you can save it as txt file and simply change extension in your file browser, to do that follow those steps:

a) Click the Start button.

b) Open the Control Panel.

c) Find Appearance and Personalization.

d) Choose Folder Options.

e) Find Advanced Settings.

f) Display file extensions.

g) By default, the Hide Extensions for Known File Types check box is selected. Deselect this check box to display file extensions.

NOTE:To modify your html document you can open *.html file in any text editor.

Html5documentstandardscheme

Listingof the example given above:

<!doctypehtml>

<html>

<head>

                        <title>Page title</title>

</head>

<body>

                                      <header>

                                                   <h1>Page title</h1>

                                        </header>

                                       <nav>

                                                  <!-- Navigation -->

                                       </nav>

                                      <main> 

<section>

                                                                  <!-- Main content area -->

                                                                     <article>

                                                                                         <!--Specific content area -->

                                                                         </article>

</section>

                                          </main>               

                                       <aside>

                                                  <!-- Sidebar -->

                                      </aside>

                                      <footer>

                                                  <!-- Footer -->

                                      </footer>

                  </body>

</html>

Scheme elements description:

<!doctype html>   

First, we have the Document Type Declaration, or doctype. This is simply a way to tell the browser—or any other parser—what type of document it’s looking at. In the case of HTML files, it means the specific version and flavor of HTML. The doctype should always be the first item at the top of any HTML file.

<meta>

Metadata is data (information) about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

<body>

The <body> tag defines the document's body.The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.

<main>

The <main> tag specifies the main content of a document. The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

NOTE: There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

<header>

The <header> element specifies a header for a document or section.<header>represents a group of introductory or navigational aids. It may contain some heading elements but also other elements like a logo, wrapped section's header, a search form, and so on.

<nav>

The<nav>elementrepresents a section of a page that links to other pages or to parts within the page: a section with navigation links.

<article>

The <article>element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). This could be a forum post, a magazine or newspaper article, a blog entry, an object, or any other independent item of content.

<section>

The <section>element represents a generic section of a document, i.e., a thematic grouping of content, typically with a heading. Each <section> should be identified, typically by including a heading (<h1>-<h6> element)

NOTE:Nesting <article> in <section> or Vice Versa?<Section> element should be used for a thematic grouping of content - it can encompass, for example, a chapter of a larger article or, alternatively, include several on the same page of relatively short articles, combined with some common features. <Article> element has a narrower mission than <section>. This tag makes sense to mark up some self-contained, independent piece of content, which in principle can be used on their own without reference to the rest of the page content. Nevertheless depending on the content, we can either nest element <article>in the <section>element, and vice versa.

<aside>

The <aside> element represents a section of the page with content connected tangentially to the rest, which could be considered separate from that content. These sections are often represented as sidebars or inserts. They often contain the definitions on the sidebars, such as definitions from the glossary; there may also be other types of information, such as related advertisements; the biography of the author; web applications; profile information or related links on the blog.

<footer>

The<footer>element represents a footer for its nearest sectioning content or sectioning root element. A footer typically contains information about the author of the section, copyright data or links to related documents.

Example of simply HTML document and corresponding web page: