Description of basic html elements (tags)

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>

        <meta charset="utf-8">   <meta name="description" content="The HTML5 template">   <meta name="author" content="author name">

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

<!DOCTYPE html>                                                                                                                           Web page in web browser                                                <html> <head><title>Sample HTML5 Layout</title><link href="StyleSheet.css" rel="stylesheet"/></head><body><header><h1>This is page heading</h1></header><nav><ul><li><a href="#">Home</a></li><li><a href="#">About Us</a></li><li><a href="#">Contact Us</a></li></ul></nav><article><h1>This is article heading</h1><p>       Hello world! Hello world! Hello world!</p></article><aside><figure><imgsrc="image.png" height="100px"                 <figcaption>Figure caption goes here</figcaption></figure><p><small>Text in aside section of web page. </small></p></aside><section><h1>This is a section heading</h1><p>                                                                                                              The same page after applying StyleSheet.css You can fill this section with any content. The   same is true for all other sections                           </p></section><footer><hr />   Copyright (C) 2016. All rights reserved.</footer></body></html>

Description of basic html elements (tags)

Formattingparagraphs

Innerheaders of different levels <h№>text</h№> Where № - heading level number from biggest to lowest (1 to 6). For example, <H1> ... </ H1> - 1st level header.
Create a paragraph <p>text</p> Paragraphs are separated by a double line spacing
Transfer to a new line within a paragraph <br> Single tag
Separating horizontal line between paragraphs <hr size=«?»> Single tag. «?» - the thickness of the line in pixels. The thickness of the line may be left blank.

Formattingtext

Bold <b>text</b>

<b>Bold</b>

<I>Italics</I>

<U>Underlined</U>

<S>Slashed</S>

<SMALL>SMALL </SMALL>

<SUP>Superscript</SUP>

<SUB>Subscript</SUB>

Italics <i> text</i>
Underlined <u>text</u>
Slashed <s> text</s>
Reducedsize <small> text</small>
Superscript <sup>text</sup>
Subscript <sub>text</sub>

Generatinglists

Numbered <ol><li> Element </li></ol>

<OL>

<LI> Element 1 </LI>

<LI> Element 2</LI>

<LI>Element3</LI>

</OL>

Marked <ul><li> Element </li></ul>
Elementofthelist <li>Element</li>

HTML attributes

Elements may contain attributes that are used to set various properties of an element. Some attributes are defined globally and can be used on any element, while others are defined for specific elements only. All attributes have a name and a value and look like as shown below in the example:

<h1 id="myHeader" style = “color:blue;margin-left:50%;"> Attribute “id” indicates specific name: “myHeader” of the element ”h1”. Attribute“style” states that this text is blue and is in the center of the screen. </h1>

 

Attribute Belongs to tag Description
alt    

 

<area>, <img>, <input> Specifies an alternate text when the original element fails to display.
height

 

<canvas>, <embed>,<iframe>, <img>, <input>, <video> .

 

Specifies the height of the element
href

 

<a>, <area>, <base>, <link>   Specifies the URL of the page the link goes to.  
id  

 

GlobalAttributes   Specifies a unique id for an element.
src    

 

<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video> Specifies the URL of the media file.
style    

 

GlobalAttributes Specifies an inline CSS style for an element.

 

Inserting images

To insert image you should use <img> tag.It contains attributes only (src, alt, width, height), and does not have a closing tag.The src attribute specifies the URL (web address) of the image. The alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).If a browser cannot find an image, it will display the value of the alt attribute.

<imgsrc = "image name.jpg" height = "480" width = "640" alt = "Your browser don’t support images"/>

NOTE: Always specify the width and height of an image. If width and height are not specified, the page will flicker while the image loads. Width and height parameters can be indicate either in pixels (i.e. 100px) or percents of the current canvas screen (10%).

NOTE:If not specified, the browser expects to find the image in the same folder as the web page.However, it is common to store images in a sub-folder. You must then include the folder name in the src attribute:

<imgsrc = "/Test images/image name.jpg" height = "480" width = "640" alt = "Your browser don’t support images"/>

HTML Links

Types of links:Hyperlinks (absolute links); Local links (relative links); Bookmarks.

NOTE:A link does not have to be text. It can be an image or any other HTML element. To use an image as a link, simply nest the <img> tag inside the <a> tag.

 

Hyperlinks

Links are found in nearly all web pages. Links allow users to click their way from page to page. Any HTML links are hyperlinks. You can click on a link and jump to another document. The key here is an oddly named tag called the anchor tag. This tag is encased in an <a></a> set of tags and contains all the information needed to manage links between pages.

<a href = "http://www.wikipedia.org">wikipedia.</a>

The href attribute specifies the destination address (http://www.wikipedia.org) of the link.The link text(wikipedia.) is the visible part and displayed on the page.

 

Local links

Relative references are used when your website includes more than one page. You might choose to have several pages and a link mechanism for moving among them. Example below will lead us from current page to the “About” page.

 

<a href = "about.html">About</a>

 

Bookmarks

HTML bookmarks are used to allow readers to jump to specific parts of a Web page. Bookmarks can be useful if your webpage is very long. To make a bookmark, you must first create the bookmark, and then add a link to it. When the link is clicked, the page will scroll to the location with the bookmark.

1. Create bookmark with the id attribute:

<p id = “Section1”> Section 1 text </p>

2. Add a link to the bookmark ("Section 1 "), from within the same page:

<a href =”#Section1”> Jump to section 1 </a>

HTML Symbol and Entities

Some characters are reserved in HTML.If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.Character entities are used to display reserved characters in HTML. Many mathematical, technical, and currency symbols, are not present on a normal keyboard.To add such symbols to an HTML page, you can use an HTML entity name.If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.A syntax of entity and symbols usage in html:

&entity_name; OR&#entity_number;

Tableofcommonhtmlsymbols

Symbol Description EntityName EntityNumber
  non-breakingspace &nbsp; &#160;
< lessthan &lt; &#60;
> greaterthan &gt; &#62;
& ampersand &amp; &#38;
" doublequotationmark &quot; &#34;
' singlequotationmark (apostrophe) &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
euro &euro; &#8364;
© copyright &copy; &#169;
® registeredtrademark &reg; &#174;
trademark &trade; &#8482;
eurosign &euro; &#8364;
$ dollarsign &dollar &#36;

 


Дата добавления: 2018-04-05; просмотров: 2519; Мы поможем в написании вашей работы!

Поделиться с друзьями:




Мы поможем в написании ваших работ!