-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtechnical-documentation-page.html
92 lines (92 loc) · 5.61 KB
/
technical-documentation-page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Documentation Page</title>
<link rel="stylesheet" href="tdp.css" />
</head>
<body>
<main id="main-doc">
<nav id="navbar">
<ul>
<header>HTML Documentation</header>
<li>
<a href="#HTML_is_a_descriptive_language" class="nav-link">HTML is a descriptive language</a>
</li>
<li>
<a href="#The_Bases_of_HTML" class="nav-link">The Bases of HTML</a>
</li>
<li>
<a href="#First_Steps_with_HTML" class="nav-link">First Steps with HTML</a>
</li>
<li>
<a href="#The_Tag_a" class="nav-link">The Tag a</a>
</li>
<li>
<a href="#Headings" class="nav-link">Headings</a>
</li>
</ul>
</nav>
<section class="main-section" id="HTML_is_a_descriptive_language">
<header>HTML is a descriptive language</header>
<p>The reader has probably used a word processor (AbiwordTM, Microsoft Word or KWordTM) or a page description program (QuarkXPressTM). With this type of applications the user has total control over the elements of the document: you can tell the program "put this text with this size", "place it to 1 cm. of the border", "use this indent for paragraphs", etc... With HTML the programmer does not have this kind of control over the elements that will be included in his page. The goal of this language will be to simply describe what a page looks like so that by examining that description the end user’s browser is able to display it in the best possible way. With HTML we can tell the browser that this is a headline, here begins a paragraph, these are elements of a list, etc. later the browser will decide how to show those elements.</p>
</section>
<section class="main-section" id="The_Bases_of_HTML">
<header>The Bases of HTML</header>
<p>Once we have reviewed some basic notions of HTML and Web page programming in general we will enter fully into the programming with this language. Soon we will realize the simplicity of this language which makes it a very easy language to learn and which will allow us to create pages even more easily.</p>
<p>The commands of this language will be formed by commands called tags that may have either the following structure:</p>
<code><LABEL_NAME></code>
<p>Or this one:</p>
<code><LABEL_NAME> TEXT </LABEL_NAME></code>
<p>As we see, the first structure is formed by a single instruction and the second by two: one that marks the beginning of the label and another that marks the end, with text between both.</p>
</section>
<section class="main-section" id="First_Steps_with_HTML">
<header>First Steps with HTML</header>
<p>"The code of the page consists of two large blocks, the header and the body."</p>
<p>"The header of the page is delimited by the start and end instructions of the head tag. These instructions must be inside the HTML tag as follows:"</p>
<code>
<html> <br>
<head> <br>
Head elements <br>
</head> <br>
... Rest of the page code ... <br>
</html> <br>
</code>
<p>In the header of the page you enter all that information that will affect the entire page. Initially this information will be limited to the <i>title</i>. This title will be indicated with the <i>title</i> tag using the following syntax:</p>
<code>
<html> <br>
<head> <br>
<title>Mi first Website</title> <br>
</head> <br>
<html> <br>
</code>
</section>
<section class="main-section" id="The_Tag_a">
<header>The Tag a</header>
<p>This label, of simple name, is the one that will allow to include hypertext links in the pages. Its attribute 'href' allows to indicate which page the user should jump to when clicking on the appropriate text. The text of the link will be the one entered between the start instruction and the end instruction of the label and must be highlighted by the browser so that the user knows that you can click on it. The structure of a link is:</p>
<code>
<a href="url"> <br>
Text that will be sensitive (hypertext) <br>
</a>
</code>
<p>Graphic browsers such as Netscape Navigator and Microsoft Internet Explorer TM highlight this text by showing it in a different color and underlining it, and the cursor will change when placing it on the text.</p>
</section>
<section class="main-section" id="Headings">
<header >Headings</header>
<p>Usually a document has, in addition to plain text, a series of headers or headlines. For this, the HTML language has a series of tags that allow holders of up to 6 levels of importance.</p>
<p>These labels are: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> . The letter "h" at the beginning of the name of these labels comes from the abbreviation of the English word heading meaning header. Following the axe is a number from one to six that indicates the importance of the holder being the most important one and the least important six:</p>
<code>
<uL>
<li><h1>Heading 1</h1></li>
<li><h2>Heading 2</h2></li>
<li><h3>Heading 3</h3></li>
<li><h4>Heading 4</h4></li>
<li><h5>Heading 5</h5></li>
<li><h6>Heading 6</h6></li>
</uL>
</code>
</section>
</main>
</body>
</html>