-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathNotes.txt
91 lines (87 loc) · 4.09 KB
/
Notes.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
85
86
87
88
89
90
91
HTML:
Tags:
1. HTML:
this tag is used to identify if the document is a html document
denotion- <html> and </html>
2. Head:
the content in this tag will not appear in the pag, but at the tab
denotion- <head> and </head>
a. Title:
the text inside this will be the title of that respective tab
deotion- <title> and </title>
3. Body:
the main content that is displayed in the webpage
denotion- <body> and </body>
a. Paragraph
the content in this tag will be displayed as a paragraph in the webpage
denotion- <p> and </p>
b. Break
the content after this tag will be displayed on the next line of the paragraph
[self closing tag]
denotion- <br>
c. Heading
text that is displayed at different sizes based on the priority
heading- 1 -> Largest / Highest priority
heading- 6 -> Smallest / Least priority
denotion-
<h1> <h2> <h3> <h4> <h5> <h6>
</h1> </h2> </h3> </h4> </h5> </h6>
d. Bold
the content in the tag will be displayed as bold in the webpage
denotion- <b> and </b>
e. Italic
the content in the tag will be displayed as italic in the webpage
denotion- <i> and </i>
f. Underline
the text in the tag will be displayed as underlined text in the webpage
denotion- <u> and </u>
g. Image
tag used for displaying images in the webpage
[self closing tag]
denotion- <img/>
A. src attribute
image path can be image link (as that of one provided by google, or edge)
<img src= "image path"/>
for simplicity, store all images in a folder in the same folder as your html docs
h. Div
this tag is used to divide the webpage into different sections, the content inside the div tags will be displayed only in that specific region
denotion- <div> and </div>
CSS:
Selectors:
used to determine which html element is to be styled
Declarations:
Consists of a set of instructions which tell the browser how to style the html element
properties and values for the element enclosed in crly brakets
Ways to link with HTML:
priority order- inline > external/internal
for internal and external, whichever comes last is taken as the priority
1. write css within HTML tags - inline CSS
eg- <p style="font-size:12px; color: red"> this is red text with size 12px </p>
*only this paragraph will have this format
2. write it inside your html enclosed in the style tag to the head of the HTML document - internal CSS
eg- <head> <style> p {font-size: 12px; color: orange} </style> </head>
*all paragraphs will have this format
3. write a separate file with .css extension and use <link href= "name of file.css"> to the head of the HTML document - external CSS
<head> <link rel= "stylesheet" href= "name of file.css> </head>
*rel- specifies the relationship that the linked file has with the cource file
*href- hypertext references used to provide a path to the css stylesheet which is to be linked
HTML element selection:
1. element selector
using the name of the element to be selected
eg- for a paragraph tag
p {properties}
all paragraph elements will have this exact same formatting
2. class selector
using a class given to the element while writing the HTML <p class= "class_name"> </p>
eg- .class_name {properties}
*using this method for formatting, you need to add a dot before the class name
3. id selector
using a id given to the element while writing the HTML <p id= "id_name"> </p>
eg- #id_name {properties}
*using this method for formatting, you need to add a # bfore the id of that element
4. attribute selector
using an attribute used while writing the HTML
eg- <p attribute= value> </p>
p[attribute = value] {properties}
*using this method requires you to specify the element name followed by [attribute=value]
*above css will select all the paragraphs wich have type attributes value as text