-
Notifications
You must be signed in to change notification settings - Fork 0
/
html_basics.txt
85 lines (59 loc) · 3.81 KB
/
html_basics.txt
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
almost all elements in html page are just prices of content wrapped in tags
hyperText in html means that it can link to different elements in the page or different pages
we name the html file that has the homepage of the website as index.html as the web servers
will by default look for an index.html file when it lands on the website
every html file starts with the DOCTYPE which tells which version of html is used for rendering
the website/document
<html></html> is the root element of the document and all other elements are its children
<body></body> is the first element that should be under <html> and it contains meta information about the
page, ie, all the info needed to render the webpage in the browser correctly
<meta> is a self closing tag, and any html file should have <meta charset="UTF8"> in it
as without it some special characters cannot be displayed
<title></title> also goes under <body></body> and gives the name of the tab
and <body></body> is where eveything is defined for the webpage
the lang attribute can used to define the language of a certain tag, and as such since its given to
html tag, the langs value defined there is applied to the whole page
<em></em> tag is used for italisized text
<strong></strong> for making strong points
<b></b> for making text bold
<i></i> to make it actual italics, used to denote names of something
These are all semantic elements where b is the least semantic of them all
items in an unordered lists have a bullet point before them but with ordered list, they have
numbers before them
to create a link in html, we use the "anchor" element denoted by a, where
<a href="..." target="_..." rel="noopener noreferrer">....</a>
the rel attribute relates to the "relation" between the current page and the linked document
the value "noopener" means that the new window opened from the link will have no access
to the original page from where the link was attatched, this makes it safer incase if the
link opens to a malicious site
the value "noreferrer" means that the it prevents the opened link form knowing which page
has a link to it, essentially detatching it
values of target attr can be _self which opens the page pointed by the link in the same page
and _blank where the page pointed by the link is opened in a new tab, and mentioning the safety
values of rel attr becomes important then (there are more values of this attr, but these are
enough for now)
alt attribute for <img> (self closing) tag is used when the image cannot be loaded and a text
has to be displayed
the four different formats in which images can be displayed is jpg, gif, png, svg
jpg is used when lots of colors, gradients are to be displayed and when lower space is needed to save
that image, but jpgs dont allow for transparent pixels
gifs are used to show motion in the image, but are limited in the number of colors it can show
transparent pixels are allowed hyperText
pngs are bigger in size than jpgs, but have transparent pixels, so they are usually used for '
logos
svgs can scale up or down without any loss of quality since they use vector based graphics
* is a universal CSS selector which can be used to override the default style settings of a page, for
egs, a white margin always exists, to get rid of that we can document
* {
margin:0;
padding:0;
box-sizing:border-box;
}
<,>,& are reserved characters as they mean something in html, hence to reprsent them in the content
that is to be written in the html file, we use entities, so
> can be represented using <
< can be represented using >
& can be represented using &
"..." can be represented using “....”
so entities are like escape characters in other programming languages like C,python where \ can
be thought of as a reserved character in C