-
Notifications
You must be signed in to change notification settings - Fork 0
/
html.html
115 lines (93 loc) · 5.79 KB
/
html.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
<!-- about html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html</title>
<meta content="width=device-width,initial-scale=1,user-scalable=no" name=viewport>
<script src="style.js" defer></script>
</head><body>
What a URL is composed of:
<span class="alt-text">
protocol://host:port/path#anchor</span> "anchor" is also known as fragment
You can add a Query String, additional parameters for the request, often in the form of key-value pairs.
It starts with (?), for example, in `https://example.com/page?name=Bob&age=30`
A "slug" is a URL-friendly version of a resource identifier, typically derived from a title or name.
It’s used to create readable and SEO-friendly URLs (search engine optimization). Slugs often replace
spaces with hyphens, and they may convert uppercase letters to lowercase. P.s. Everything that comes
after "port" in the URL is case sensitive.
The following command is deployed for auditioning said html page:<span class="alt-text">
python -m http.server</span> <em>it'll say, "..serving you the
http on server 8000" or something</em>
desktop url localhost:8000/page.html
private ip (needed on mobile) 192.168.0.1:8000/page.html
port forwardng requires your public ip but thats a different topic
First off, what do we call these things...
<span class="alt-text"><!-- This is a comment - that will not be displayed in the published html page --></span>
<b>Tags</b> mark up existing content to define its presentation; they're also used in the creation of elements <em>(as we demonstrate towards the end)</em>
They are always surrounded by angled brackets. As such, you enclose said elements w/ an opening and closing tag.
<span class="alt-text">
<p> and </p></span>
<b>Attributes</b> provide additional information about HTML elements. They are included in the opening tag.
Attributes come in several flavors: Quoted or unquoted attributes (w/ a string or numeric value), as well as boolean attributes.
<span class="alt-text">
<a href="https://example.com"></a></span>
<b>Elements</b> consist of a start tag, content, and an end tag. If the tag doesn't have an end tag, it can be a void element.
This is a regular element:
<span class="alt-text">
<p>Yadayada yada</p></span>
The following is a void element. Void elements do not have any content or end tag, as they are considered <em>self-closing</em>:
<span class="alt-text">
<img src="image.jpg" alt="Description of image"></span>
Anchors are used in html to jump you around in the document.
Here's an example of a link that is also an anchor:
<span class="alt-text">
<a href="func.html#void-anch">Hyperlinked words that are anchored now</a>
<div id="eg-anch">Example words for other end of the link</div></span>
I will go over what those tags and attributes mean.
<HTML> ... </HTML> Encloses the entire document and
overrides other filetyping mechanisms
<TITLE> ... </TITLE> The title of the document
<BODY> ... </BODY> Encloses the body of the document.
<Hn> ... </Hn> Section heading, n=1 (biggest) to 6
<PRE> ... </PRE> Encloses block of text to be shown verbatim.
<A NAME="..." HREF="URL"> ... </A>
Creates a link (HREF) or (NAME) or both. They are attributes, NAME being an example
of something deprecated in HTML5 (which may or may not be true, test it for yourself)
<a> being for hyperlinks, and <href> to specify the URL of the link.
<DIV> ... </DIV> is a block-level container element used to group other
elements and apply/manipulate sections. So <div> may be called a tag
(when referring to the specific parts) and an element (when referring to the whole structure).
<span class="alt-text"><div id="main-content"></div></span>
"main-content" is the value assigned to the id attribute. This value serves as the unique identifier for that particular element.
Inlined image<span class="alt-text">
<IMG ALIGN="..." SRC="URL" ALT="..."></span>
Inserts an image from SRC, or text
from ALT if the image can't be used.
ALIGN is one of top, middle, bottom (default)
Text flow
<br> Force a line break
<p> Add a paragraph break
<hr> </hr>Horizontal rule (pseuedo page break)(i sometimes prefer a dotted line)
Hints
You can go to 'more settings' or use <Key>Ctrl+U or type <b>view-source:https://anywebsite.you/desire</b>
to view, copy, analyze the source code of any document.
Entity name examples
Overline ¯ ¯ ¯
Pilcrow (paragraph) ¶ ¶ ¶
Georgian comma · · ·
Cedilla ¸ ¸ ¸
UPPERCASE RHO Ρ Ρ Ρ
lowercase rho ρ ρ ρ
UPPERCASE SIGMA Σ Σ Σ
lowercase sigma σ σ σ
UPPERCASE TAU Τ Τ Τ
lowercase tau τ τ τ
UPPERCASE UPSILON Υ Υ Υ
lowercase upsilon υ υ υ
<span class=sntc>Issue: This line spacing was changed, doesnt work as intended.</span>
<LI><span class=sntc>This is <tt>&emsp;</tt></span>
<LI><span class=sntc>This is <tt>&ensp;</tt></span>
<LI><span class=sntc>This is a regular space.</span>
<LI><span class=sntc>This is <tt>&nbsp;</tt></span>
</body></html>