-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhtmlbasics.html
More file actions
195 lines (174 loc) · 10 KB
/
Copy pathhtmlbasics.html
File metadata and controls
195 lines (174 loc) · 10 KB
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A basic example of an HTML page, and a summary of fundamental HTML concepts.">
<title>HTML Fundamentals</title>
</head>
<body>
<h1>The basics of HTML</h1>
<img src="images/HTML5_logo.png" alt="HTML 5 Logo">
<p>HTML stands for Hyper Text Markup Language.</p>
<p>
HTML documents are
composed of <strong>HTML elements</strong>. Each HTML element describes
a <strong>type</strong> of document <strong>content</strong>.
</p>
<p> Here's a Heading Level 1 element:</p>
<code><h1>Welcome to our webpage!</h1></code>
<p> Note that this element has 2 tags:
an opening tag (<h1>) and a closing tag (</h1>).
The tags themselves indicate the element <strong>type</strong>;
between the tags is the <strong>content</strong> of the element
</p>
<p>HTML elements can also be <strong>nested</strong> - that is, an element may
<strong>contain</strong> one or more other elements inside of it!
</p>
<p>Some HTML elements, such as the <br> line break element, do not have a closing tag. <br>
These elements are called <strong>empty</strong> elements, because they cannot contain any content,
including other nested elements.
</p>
<p>Elements may also have <strong>attributes</strong> indicating additional properties/information about the element,
which are specified within the opening tag. <br>
For example, an <img> image element (see details below) may include attributes like
<strong>src</strong>, <strong>alt</strong>, and <strong>title</strong>.
</p>
<h2>Fundamental Document Structure</h2>
<p>Here is a simple but complete page.</p>
<pre><code>
<html>
<head>
<title>Our Webpage</title>
</head>
<body>
<h1>Welcome to our webpage!</h1>
<p>There isn’t much here yet.</p>
<p>But, there will be more very soon!</p>
</body>
</html>
</code></pre>
<ul>
<li>
HTML elements in a document are organized in a hierarchy, a lot like a family tree. The “root” of the tree
is
the html element.
</li>
<li>
Nested elements are called “children” of the element that contains them. The containing element is called
the
“parent” element.
For example, the body element has 3 children: h1, and two p elements, to which the body element is their
parent.
</li>
<li>The HTML element always has exactly two children - the head and the body elements. These are
sectioning elements with special purposes:</li>
<ol>
<li>The body element contains all of the elements that represent content to be displayed onscreen</li>
<li>The head elements contains non-displayed information about the page, such as the tab title or other meta
information about the site (for example, short descriptions and keywords used by search engines and
social
media)</li>
</ol>
<li>
Note the use of indentation to organize the nested elements. See the <a href="#formatting">"Formatting HTML" section</a> for tips on keeping things organized.
</li>
</ul>
<h2>HTML elements</h2>
<h3>HTML Text elements</h3>
<p>This is a non-exhaustive list of common HTML elements used to organize and structure blocks of text on a page.
For a more in-depth tutorial on these common elements, check out MDN's
<a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals" target="_blank">HTML text fundamentals</a>
</p>
<ul>
<li>The <p> element represents a paragraph.</li>
<li>The <h1>, <h2>,... <h6> elements represent six levels of section headings;<h1> is
the highest level and largest text, <h6> is the highest level and largest text.</li>
<li>The <ul> and <ol> create Unordered (bulletted) lists and Ordered (numbered) lists, respectively.
Both kinds of lists have <li> child elements (“list item”), which separate the different items of the
list.
</li>
<li>
The <pre> ("preformatted") element renders its contents as written in the HTML file, including whitespace and linebreaks,
usually in monospace font. This is helpful for displaying certain text like code or ASCII art.
</li>
<li>
The <br> element produces a line break; it is an <strong>empty</strong> element and thus has no closing tag or content. <br>
This is useful for poetry, lyrics, or other text content where the line breaks are specific, and should not be determined purely by the width of the text area.<br>
Generally, do not use <br> to do paragraph breaks or separate blocks of text; rather, separate the text into multiple elements.
</li>
<li>There are many HTML elements that allow for in-line text semantics. Here are some common ones:
<ul>
<li>
<strong><strong></strong>, which indicates important text and is typically rendered as bold.
</li>
<li>
<em><em></em>, which indicates emphasized text and is typically rendered as italic.
</li>
<li>
The <b><b></b> and <i><i></i> elements also do bold and italics.
However, it is generally considered better practice to use <strong><strong></strong> and <em><em></em>.
</li>
<li>
The <u><u></u> element makes underlining. However, underlined text on the web usually implies links, so
it's usually not a good idea to underline things.
</li>
<li>
The <code><code></code> element indicates code snippets, and usually renders in monospace font.
It is often nested inside a <pre> ("preformatted") element.
</li>
</ul>
</li>
</ul>
<p> For a few more advanced HTML text formatting elements, check out: <a
href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting" target="_blank">MDN's Advanced Text Formatting</a>
</p>
<p> A full list of HTML text elements can be found here: <a
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#text_content" target="_blank">MDN's HTML text elements' documentation</a>
</p>
<h3>Other HTML elements</h3>
Here are some other kinds of (non-text) HTML elements.
<ul>
<li>
The special <!DOCTYPE> element always appears as the first line of an html document,
and declares the document’s type/version of HTML. Modern pages written in HTML5 need only have: <!DOCTYPE html>
</li>
<li>
The <title> element species the title displayed in the Tab bar at the top of the browser window.
This goes in the <head> section of the HTML document.
</li>
<li>
<meta> elements also go in the <head> section of the HTML document.
These contain “meta” information about the page, but that isn’t itself displayed ON the page.
These may be used by the browser, search engines, social media platforms, etc.
</li>
<li>
The <img> element is an empty element which displays an image. The location of the image file must be
provided as the <strong>src</strong> attribute. Optional attributes include <strong>alt</strong> for screen readers,
and <strong>title</strong> for tooltip (mouse-over) text. <br>
Here's an example of an image element:
<br><code>
<img src="picture.jpg" alt="A dog wearing sunglasses" title="Isn’t he cute?!?">
</code>
<br>
<img src="images/dog.jpg" alt="A dog wearing sunglasses" title="Isn’t he cute?!?">
</li>
<li>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a" target="_blank"> <a></a>, known as the
anchor element, creates a hyperlink to a URL given in the <strong>href</strong> attribute.
</li>
</ul>
<h2 id="formatting">Formatting HTML</h2>
<ul>
<li>When writing HTML, extra spaces, indentations, and linebreaks are not rendered by the browser. This might be
frustrating at first, but it actually allows us to better organize the code without affecting the layout negatively.
If you have a lot of content in a single element, you can spread it over several lines for viewability.
</li>
<li>When nesting elements, use indentation to organize levels; each level of nesting increases by one indent.
(A common exception are the head and body elements, since they are standard in every HTML document)
</li>
<li>If we have parent elements stretched across multiple lines, we sometimes try to keep the opening and closing tags
aligned at the same indentation.</li>
</ul>
<p><a href="usingvscode.html" title="Using VSCode effectively" target="_blank">Check out some more tips for using VSCode effectively here!</a></p>
</body>
</html>