-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
114 lines (110 loc) · 10.2 KB
/
index.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
<!DOCTYPE! html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Abel&family=Lato:wght@300&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="UTF-8"/>
<title>Getting started with HTML</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main id="main-doc">
<section id="what_is_html?" class="main-section">
<header><h2 id="lower-under">What is HTML?</h2></header>
<p>HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on.
</p>
</section>
<section id="what_you_should_already_know" class="main-section">
<header><h2 class="lower">What you should already know</h2></header>
<p>Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up, and understand how to create and manage files.</p>
</section>
<section id="anatomy_of_an_HTML_element" class="main-section">
<header><h2 class="lower">Anatomy of an HTML element</h2></header>
<img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-small.png" alt="html-element">
<p>The anatomy of our element is:</p>
<ul>
<li><span class="bold">The opening tag</span>: This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.</li>
<li><span class="bold">The content</span>: This is the content of the element. In this example, it is the paragraph text.</li>
<li><span class="bold">The closing tag</span>: This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.</li>
</ul>
<p>The element is the opening tag, followed by content, followed by the closing tag.</p>
</section>
<section id="nesting_elements" class="main-section">
<header><h2 class="lower">Nesting elements</h2></header>
<p>Elements can be placed within other elements. This is called nesting. If we wanted to state that our cat is very grumpy, we could wrap the word very in a <code><strong></code> element, which means that the word is to have strong(er) text formatting.</p>
<div class="example">
<p>
<code><p></code> My cat is <code><strong></code> very <code></strong></code> grumpy.<code></p></code>
</div>
</p>
<p>There is a right and wrong way to do nesting. In the example above, we opened the <code>p</code> element first, then opened the <code>strong</code> element. For proper nesting, we should close the <code>strong</code> element first, before closing the <code>p</code>.</p>
</section>
<section id="block_versus_inline_elements" class="main-section">
<header><h2 class="lower">Block versus inline elements</h2></header>
<p>There are two important categories of elements to know in HTML: block-level elements and inline elements.</p>
<ul>
<li><span class="bold">Block-level elements</span> form a visible block on a page. A block-level element appears on a new line following the content that precedes it. Any content that follows a block-level element also appears on a new line. Block-level elements are usually structural elements on the page. For example, a block-level element might represent headings, paragraphs, lists, navigation menus, or footers. A block-level element wouldn't be nested inside an inline element, but it might be nested inside another block-level element.</li>
<li><span class="bold">Inline elements</span> are contained within block-level elements, and surround only small parts of the document's content (not entire paragraphs or groupings of content). An inline element will not cause a new line to appear in the document. It is typically used with text, for example an <code><a></code> element creates a hyperlink, and elements such as <code><em></code> or <code><strong></code> create emphasis.</li>
</ul>
</section>
<section id="attributes" class="main-section">
<header><h2 class="lower">Attributes</h2></header>
<p>Elements can also have attributes. Attributes look like this:</p>
<img src="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started/grumpy-cat-attribute-small.png" alt="attribute">
<p>Attributes contain extra information about the element that won't appear in the content. In this example, the <code>class</code> attribute is an identifying name used to target the element with style information.</p>
<p>An attribute should have:</p>
<ul>
<li>A space between it and the element name. (For an element with more than one attribute, the attributes should be separated by spaces too.)</li>
<li>The attribute name, followed by an equal sign.</li>
<li>An attribute value, wrapped with opening and closing quote marks.</li>
</ul>
</section>
<section id="anatomy_of_an_HTML_document" class="main-section">
<header><h2 class="lower">Anatomy of an HTML document</h2></header>
<p>Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page:</p>
<div class="example">
<code>
<!DOCTYPE html><br><br>
<html lang="en-US"><br><br>
<head><br><br>
<meta charset="utf-8"/><br><br>
<title>My test page</title><br><br>
</head><br><br>
<body><br><br>
<p>This is my page</p><br><br>
</body><br><br>
</html>
</code>
</div>
<p>Here we have:</p>
<ol>
<li><code><!DOCTYPE html></code>: The doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <code><!DOCTYPE html></code> is the shortest string of characters that counts as a valid doctype. That is all you need to know!</li>
<li><code><html></html></code>: The <html> element. This element wraps all the content on the page. It is sometimes known as the root element.</li>
<li><code><head></head></code>: The <head> element. This element acts as a container for everything you want to include on the HTML page, that isn't the content the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. You will learn more about this in the next article of the series.</li>
<li><code><meta charset="utf-8"></code>: The <code><meta></code> element. This element represents metadata that cannot be represented by other HTML meta-related elements, like <code><base></code>, <code><link></code>, <code><script></code>, <code><style></code> or <code><title></code>. The charset attributes sets the character set for your document to UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. There is no reason not to set this, and it can help avoid some problems later.</li>
<li><code><title></title></code>: The <code><title></code> element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.</li>
<li><code><body></body></code>: The <code><body></code> element. This contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.</li>
</ol>
</section>
<section id="reference" class="main-section">
<header><h2 class="lower">Reference</h2></header>
<p>All the documentation in this page is taken from MDN</p>
</section>
</main>
<nav id="navbar">
<header><h1 class="bold">Getting started with HTML</h1></header>
<a class="nav-link" href="#what_is_html?">What is HTML?</a>
<a class="nav-link" href="#what_you_should_already_know">What you should already know</a>
<a class="nav-link" href="#anatomy_of_an_HTML_element">Anatomy of an HTML element</a>
<a class="nav-link" href="#nesting_elements">Nesting elements</a>
<a class="nav-link" href="#block_versus_inline_elements">Block versus inline elements</a>
<a class="nav-link" href="#attributes">Attributes</a>
<a class="nav-link" href="#anatomy_of_an_HTML_document">Anatomy of an HTML document</a>
<a class="nav-link" href="#reference">Reference</a>
</nav>
</body>
</html>