-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml-basic.html
145 lines (136 loc) · 5.87 KB
/
html-basic.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML - Basic 2</title>
<link rel="icon" href="https://raw.githubusercontent.com/coding-dragon/coding-dragon.github.io/master/img/logo.png" type="image/x-icon">
<link rel="stylesheet" href="basic.css">
</head>
<body>
<div class="jumbotron">
<h2 class="display-3">HTML Basic</h2>
<p class="lead">
<strong>HTML</strong> is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this course will give you a basic understanding of HTML and its components.
</p>
</div>
<div class="container">
<ul>
<li><code>Anatomy of an HTML Document</code></li>
<li><code>What is an HTML element</code></li>
<li><code>HTML attributes</code></li>
<li><code>Nesting elements</code></li>
<li><code>Empty elements</code></li>
<li><code>HTML Comments</code></li>
</ul>
</div>
<br/>
<div class="container p-3 bg-head">
<h3>Anatomy of an HTML Document</h3>
<br/>
<div class="code">
<pre>
<!DOCTYPE html>
<html>
<head>
<span>head elements - title, meta data, links</span>
</head>
<body>
<span>body content elements - text, images etc</span>
</body>
</html></pre>
</div>
<p class="lead">
That wraps up the basics of individual HTML elements.<br/><br/>
<strong><!DOCTYPE html> - </strong> the doctype. It is required preamble. They don't do much, and are basically just needed to make sure your document behaves correctly.<br/>
<strong><html></html> - </strong> the html element. This element wraps all the content on the entire page and is sometimes known as the root element.<br/>
<strong><head></head> - </strong>the head element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations and more.<br/>
<strong><body></body> - </strong>the body element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks or whatever else.<br/>
</p>
</div>
<hr/>
<br/>
<br/>
<div class="container p-3 bg-head">
<h3>What is an HTML element</h3>
<br/>
<div class="code">
<pre>
<p>My cat is grumpy</p></pre>
</div>
<p class="lead">
An HTML element is defined by a start tag, some content, and an end tag. The main parts of our element are as follows: <br/><br/>
<strong>opening tag - <p></strong> This states where the element begins. Also called start tag. This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets.<br/>
<strong>closing tag - </p></strong> This states the element ends. Also called end tag. This is the same as the opening tag, except that it includes a forward slash before the element name. Never skip the end tag<br/>
<strong> the content - </strong> This is the content of the element, which in this case, is just text.<br/>
<strong> the element - </strong> The opening tag, the closing tag and the content together comprise the element.<br/>
</p>
</div>
<hr/>
<br/>
<br/>
<div class="container p-3 bg-head">
<h3>HTML attributes</h3>
<br/>
<div class="code">
<pre>
<a <span>href="https://www.google.com/"</span>>Visit here</a></pre>
</div>
<p class="lead">
HTML attributes provide additional information about HTML elements. Always specified in start tag and usually come in name/value pairs like: name="value"<br/>
<strong>href attribute</strong> - specifies the URL of the page the link goes to.
</p>
</div>
<hr/>
<br/>
<br/>
<div class="container p-3 bg-head">
<h3>Nesting elements</h3>
<br/>
<div class="code">
<pre>
<p>My cat is <span><strong></span>very<span></strong></span> </p></pre>
</div>
<p class="lead">
We can put elements inside other elements too — this is called nesting.<br/>
Make sure that your elements are properly nested
</p>
</div>
<hr/>
<br/>
<br/>
<div class="container p-3 bg-head">
<h3>Empty elements</h3>
<br/>
<div class="code">
<pre>
<img src="images/firefox-icon.png" ></pre>
</div>
<p class="lead">
HTML elements with no content are called empty elements.
</p>
</div>
<hr/>
<br/>
<br/>
<div class="container p-3 bg-head">
<h3>HTML Comments</h3>
<br/>
<div class="code">
<pre>
<span><!-- write your comment here --></span>
<span><!--
write your comments here
multiple line
--></span></pre>
</div>
<p class="lead">
With comments you can place notifications and reminders in your HTML code. Comments are not displayed by the browser, but they can help document your HTML source code.
</p>
</div>
<hr/>
<br/>
<br/>
</body>
</html>