Skip to content

Commit 95c1565

Browse files
sbtriessbtries
committed
🎨
1 parent 7a58d80 commit 95c1565

29 files changed

+1975
-0
lines changed

‎2 Flask + HTML + CSS/docs/01 HTML Overview.md‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
2+
# HTML Overview
3+
4+
[HTML](https://en.wikipedia.org/wiki/HTML) stands for 'hypertext markup language', hypertext meaning that it also contains multimedia such as images, sound, and video, markup language meaning it's for formatting. HTML is the skeleton of a page, forming its fundamental structure. HTML is displayed, not 'run' like Python. You can read more about HTML on the [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML) or [w3schools](https://www.w3schools.com/html/default.asp).
5+
6+
HTML5 is the latest standard of HTML, and includes support for canvas and video elements, semantic elements, and much more. All modern browsers support HTML5, but some older browsers may not. Certain businesses are limited to older browsers, so you may need to write code that's compatible with them. You can view browser compatibility [here](https://html5test.com/results/desktop.html).
7+
8+
The [DOM](https://en.wikipedia.org/wiki/Document_Object_Model) (Document Object Model) represents the hierarchical structure of [elements](https://en.wikipedia.org/wiki/HTML_element) that make up an HTML document.
9+
10+
- [HTML Syntax](#html-syntax)
11+
- [HTML Attributes](#html-attributes)
12+
- [The Source Attribute: `src="file"`](#the-source-attribute-srcfile)
13+
- [The Href Attribute `href="file"`](#the-href-attribute-hreffile)
14+
- [The Title Attribute: `title="text"'](#the-title-attribute-titletext)
15+
- [Void Elements](#void-elements)
16+
- [Page Template](#page-template)
17+
- [Meta Tags](#meta-tags)
18+
- [Comments](#comments)
19+
- [Block and Inline Elements](#block-and-inline-elements)
20+
- [Preprocessors](#preprocessors)
21+
22+
23+
24+
25+
26+
## HTML Syntax
27+
28+
HTML elements (or 'tags') have three parts- the **element name**, **attributes** and **inner HTML** or **inner text**. Elements that contain other elements are called 'parents', elements contained in other elements are called 'children'. In general you should **use double quotes for attributes, and use lowercase for element names and attributes**.
29+
30+
31+
```html
32+
<div attribute="value">inner text</div>
33+
<div attribute1="value1" attribute2="value2">
34+
<div>inner element</div>
35+
</div>
36+
```
37+
38+
39+
## HTML Attributes
40+
41+
HTML elements can contain attributes which control their appearence and behavior.
42+
43+
44+
### The Source Attribute: `src="file"`
45+
46+
The `src` attribute controls what external file is loaded, either by path or url.
47+
48+
```html
49+
<img src="images/profile.jpg"/>
50+
<img src="https://picsum.photos/200/300">
51+
<script src="js/script.js"></script>
52+
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
53+
```
54+
55+
### The Href Attribute `href="file"`
56+
57+
The `href` attribute created a link to an external file.
58+
59+
```html
60+
<a href="https://www.google.com/">link</a>
61+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
62+
```
63+
64+
65+
### The Title Attribute: `title="text"'
66+
67+
The `title` attribute will show a 'tooltip' when the user hovers over the element. This can provide a helpful hint.
68+
69+
```html
70+
<span title="hello world!">hover over me</span>
71+
```
72+
73+
## Void Elements
74+
75+
Void or empty elements do not have closing tags, and including closing tags will produce an error. The slash at the end is optional, but it's more explicit to include it (otherwise it looks like an open tag with no closing tag). Common void elements include `br`, `hr`, `img`, `input`, `link`, and `meta`. You can view a full list [here](https://developer.mozilla.org/en-US/docs/Glossary/Empty_element).
76+
77+
```html
78+
<input type="text" value="ok"/>
79+
<input type="text" value="also ok">
80+
```
81+
82+
83+
## Page Template
84+
85+
Below is general form of an HTML document. When the page loads it's read from the top down. External CSS and JS files can loaded anywhere in the page. JavaScript that references page elements (`getElementById`, `querySelector`) must appear after those page elements appear in the page, otherwise these functions will return `null`. CSS is ordinarily put in the head along with other metadata, JavaScript is ordinarily put at the bottom of the body so the document can load and be displayed to the user more quickly.
86+
87+
```html
88+
<!DOCTYPE html>
89+
<!-- root element -->
90+
<html lang="en">
91+
<!-- the head contains metadata about the document -->
92+
<head>
93+
<!-- meta tags store general metadata -->
94+
<meta charset="UTF-8">
95+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
96+
<!-- page title, the text that appears on a browser -->
97+
<title>Demo Page</title>
98+
<!-- import external css -->
99+
<link rel="stylesheet" type="text/css" href="css/index.css"/>
100+
</head>
101+
<!-- the body contains the actual document that will be shown to the user -->
102+
<body>
103+
<!-- page element -->
104+
<p>Hello world!</p>
105+
<!-- import external javascript -->
106+
<script type="text/javascript" src="js/index.js"></script>
107+
</body>
108+
</html>
109+
```
110+
111+
112+
- The `DOCTYPE` tag tells the browser that the document contains HTML. If omitted, some browsers will revert [quirks mode](https://en.wikipedia.org/wiki/Quirks_mode) for rendering.
113+
- The `html` tag contains the entire document
114+
- The `head` tag contains metadata, nothing inside of it is rendered in the page.
115+
- The `title` tag contains the text that's displayed in the browser tab, or the top of the browser window. It should contain the site name and a page name.
116+
- The `body` tag contains the document's content, what will be shown to the user
117+
- the `p` tag represents a paragraph
118+
119+
120+
## Meta Tags
121+
122+
```html
123+
<meta name="author" content="Your Name">
124+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
125+
```
126+
127+
## Comments
128+
129+
Comments in HTML are represented by a special tag, beginning with an explanation point and two hyphens, and ending with two hyphens.
130+
131+
```html
132+
<!-- this is a comment -->
133+
```
134+
135+
## Block and Inline Elements
136+
137+
[Block](https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements) elements will take up the full available width and force other elements to move to a new line. Examples of block elements are `p`, `h1`, `div`, `ol`/`ul`, and `form`.
138+
139+
[Inline](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements) elements only take the amount of space they need, and allow other elements to exist on the same line. Examples of inline elements are `span`, `img`, and `a`.
140+
141+
142+
143+
144+
145+
## Preprocessors
146+
147+
There are several HTML preprocessors: [Haml](http://haml.info/), [Jade](http://jade-lang.com/), [Slim](http://slim-lang.com/index.html), and [Markdown](https://en.wikipedia.org/wiki/Markdown).
148+

0 commit comments

Comments
 (0)