The website is like a child: it must be planned and created. The Baby is planned (or not) by a man and a woman. The website usually is planned by Customer and Designer. The plan often differs significantly from the final effect. The baby is created as you know by a woman and a man ;).
Let’s skip the anatomical details of making child. HTML page is created by Designer and Programmer, it is often the same person. At the beginning the website as a child is a shapeless creature. Over time, it is evolving towards humanoid creatures. HEAD - BODY
In the child appears hands, feet, head, torso, etc. Website takes the shape of a man, except that it will suffice only: head of webpage - html HEAD and the rest - html BODY. Although, if we insisted, it may be that in the BODY we have limbs and torso and maybe even a little additional functionality. Of course, both the head of child and the head of the HTML page develop and begin to manage all the rest. Child's body and the body of the HTML page, slowly take proper character and acquire specific functionality.
simple HTML code page:
<p> CONTENTS PAGE </ p>
HTML page - design:
<heta charset = "UTF-8">
<title> TITLE PAGE </ title>
<p> CONTENTS PAGE </ p>
Remember this scheme !!
Websites can be done using a variety of technologies. Recent trends prefer a "light," fast hand, enriched with attractive colors, graphics and even video, and audio. The simplest method of designing just such websites is to use free tools and free programming languages.
In this course you will learn first basic knowledge of the two main technologies: HTML5 and CSS3, and then get the necessary knowledge of jQuery, which is a JavyScript library. The next step is the analysis accompanying the training files coded web pages.
When you are building a website, you can of course write from scratch the code html, css and jQuery, but faster solution would be to take the existing files - files attached to this training. Especially since the beginning of construction html pages, this development is the "tree" html - the so-called DOM: Document Object Model.
Of course, the attached files are based on a sample system tags and in the future, you will be making changes in the structure of the attached html, creating your code most suited to your projects. While some tags such div can be set very variously, some basic structure is always unchanged. Lazarus below.
HTML is the structure (ie. DOM ang. Document Object Model) of the website. Pages are constructed using tags with which are defined different parts of a Web page. Here is an example of HTML code simple website:
<title>Designing and creating responsive websites</title>
This website (and actually code of the website) contains all the basic elements. At the beginning of the document is a document type declaration:
then the <html> - enclosed in angle brackets
Each tag is closed and at the end of the document is a closing tag </ html>. You should analyze the place of opening and closing of each of the markers. Such a system will be built in the web pages based on HTML, CSS and JS.
Tag: <! doctype html> is a new type of documents that are written in HTML5. This language in relation to its predecessors (eg. HTML4) is easier to use, simpler than the previous version and is to be the only site structure. All kinds of "embellishments" and interactions are left to the other technologies, eg. CSS, jQuery or JS. Therefore you should avoid to imparting tags directly into the html document. In the html should be placed only links to the selectors and their properties in the file CSS - style sheet.
You just feel lost? Do not worry. There is a good chance that after reading this training and analysis of attached html and css files – You will understand the basics of building responsive websites.
Important information - files with the extension .html are:
edited in the the program for editing, eg. Notepad ++ or Visual Studio Code
opened in the browser.
ELEMENTS OF THE WEBSITE
Website responsive mobile html5 building structure of the website
What can be put on the website? In fact, almost everything that is necessary for the transmission and exchange of information, namely:
a variety of applications
systems of exchange of information on-line such as: chat, forum, etc.
The following code website you already know:
<! Doctype html>
<Meta charset = "UTF-8">
<Title> Designing and creating responsive web </ title>
<P> CONTENTS PAGE </ p>
Now explore - in the next section - explanation of the structure of the document Web
STRUCTURE OF DOCUMENT Web
Every web page must contain at least the following four elements:
The first line of code website contains a document type declaration.
<! Doctype html>
<Html> - tag appears only once at the beginning of the page and closes </ html> (slash) at the end of the page. Tells the browser that the content contained in this document are presented using HTML. Other elements are inside.
That brings us to what is displayed on the Web - the content of the website. It is surrounded by the <body> and contains information that appear in the browser window: headers, navigation systems, text, images, animations, etc.
HTML - WHAT YOU NEED / AS KNOW ABOUT TECHNOLOGY HTML5
Tags block HTML5 body section:
header, nav, main, article, section, aside, footer, div
Long, long ago, when dinosaurs walked the earth, the creation of blocks on the website was trivially easy.There was one basic tag <div> </ div>, by means of which were created block structures inside the <body> </ body>.
Currently block elements can be done by using a much larger number of tags.Tags block HTML5 body section:
header, nav, main, article,
section, aside, footer, div
The most common recommended to place the pieces of block pages HTML5:
HTML5 tags section body: header, nav, footer, article, section, div aside, h, p, span
BASIC MARKERS HTML5 (<body> section)
Remember to close each tag!
In HTML4 header was described as:
<Div id = "header">
In HTML5 header is simply a header:
<Header> Content Header </ header>
The <header> should be used primarily as a headline across the page, and not as individual components header block.
The <header> tag you can put headers H1-H6, page logo, navigation, etc.
We mentioned that the <header> should contain information that will be helpful in terms of the introduction to the content of the right, or when it comes to navigation. Now, let's tag <nav>.
In HTML5 you should write:
<nav> </ nav>
The <nav> apply where we present links to other pages, which is usually a menu page. The <nav> element is used to indicate a major navigation blocks. Quite often it is used as well as navigation in other sections outside the <header>.
If we have the menu with links to pages and page footer, which put various links to the <nav> should not be used in the second case.
<Main> must contain in itself the main content of the document, usually directly related to the title and the expected content of the page. MAIN tag does not include any fixed elements repeated throughout the website: menu navigation, the logo, banners, search forms, and the like.
<Main> may contain links and navigation to the sub-main content of the document, which is not repeated on other pages.
On the website you can not put more than one element <main>. You can not <main> placed inside: ARTICLE, ASIDE, FOOTER, HEADER, NAV.
MARKERS: ARTICLE, AND SECTION DIV
Each of these markers container formed from selected areas of the page. The <article> is a special section type of the <section>. Both are new in HTML5, while the <div> that in HTML4 as the only formed containers, HTML5 is still used as a container. The differences lie in semantics elements:
<Section> is a container - block - including the general content of the page, this is a general section of the website. It can be used in conjunction with elements: H1-h6 - to indicate the document structure.
<Article> is the main content of the website, an independent, stand-alone block containing the content of the main page, ie one after he arrived surfer
<Div> This block contains any content, and the only one of the three works in all even the oldest browsers, which is why many web developers still only uses div'a, which is a mistake from the point of view of the recommendations of the W3C.
<Aside> is the section in which you placed the content associated with a tag, in which it occurs, but it is not required to understand the content of the main declared in the main tag. Most often placed in the tag footnotes and advertising.
The HTML5 is the record:
<Footer> content </ footer>
<Footer> element is the footer, which was used marker. The Site may contain more than one tag footer, but each must be in another section (that is, must be inserted into another marker)
Remember that each of these tags must be closed.
<Header> Content Header </ header>
<Nav> Navigation controls </ nav>
<Section> The content of the </ section>
<Main> Main content </ main>
<Article> The article </ article>
<Div> The contents of the block </ div>
<Footer> Content footer </ footer>
Recommended arrangement of block-level elements of the page HTML5
Remember that this is one of the most popular structures page HTML5, but not the only one.
PART IV – START
HTML5 tags: p, h, ul, ol, li, br, img, span
For the determination of the paragraphs using the <p> </ p>
For the determination of headers use the element h - from h1 to h6.
<H1> </ h1>
<H2> </ h2>
<H3> </ h3>
<H4> </ h4>
<H5> </ h5>
<H6> </ h6>
Unnumbered list, a list of related items such as navigation links and headlines.
<Ul> </ ul>
Numbered lists, a list of related numbered items, eg .: bullets.
<Ol> </ ol>
The <li> create a list within a general declaration tags, ie. Within the <ul> and <li>.
<Li> content </ li>
<Li> content </ li>
By creating HTML code you should always remember to close the tag. Eg. The opening <p> tag must have its closure </ p>, like almost all other tags. The exception is some self-closing tags as <br> and <img>.
This tag breaks the line of text - the text moves to the next line, but HTML5 is not recommended to use this tag, unless a last resort.
Img tag embedded in the location of the document - picture. It is one of the self-closing tags.
<Img src = "img/html-5-poswojsku-com.png" alt = "logo poswojsku" />
Span tag allows you to format a piece of text