-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcoding-practice-file.html
88 lines (77 loc) · 4.68 KB
/
coding-practice-file.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
<!DOCTYPE html> <!--Tells browser that this is HTML5 document-->
<html>
<head> <!-- HEAD Tag contains info about web. This is were you load CSS and JAVA script files-->
<meta charset="utf-8"> <!--Like a dictionary to translate human language to computer language (bits(1 and 0))-->
<meta name="viewport" content="width=device-width, initial-cale=1"> <!--web scaling and zoom seting (1 by default)-->
<title>Google-Replica</title> <!--Title, can be seen on web TAB-->
<link rel="stylesheet" href="styles.css">
</head>
<body> <!--BODY Tag is what you see on the page-->
<h1>My First Website</h1> <!-- These are tags used back in the days. All of that replaced by CSS-->
<h2>HTML Playground</h2>
This is my first website. <b>It's so exiting!</b> <!--HTML is made out of tags. Tags are used to mark or estinguished your text-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <br>
<b>Lorem ipsum dolor sit amet,</b> <br>
<i> adipiscing elit, sed do eiusmod tempor</i> <br>
<hr>
<a href="https://www.google.com" target="_blank">incididunt ut labore et dolore magna</a> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <!--'a' is a link tag. 'href' is an attribute (hypertext reference)-->
<br>
<img src="https://via.placeholder.com/300x150" border="10"> <!-- upload image either using url or image name if in local directory, create border arrounf-->
<br>
<img class="image" src=Images/google.webp width="250">
<ul>
<li>apples <!--parent element of the child element (apple types)-->
<ul>
<li>golden</li> <!--html tag inside another one is called nesting-->
<li>green</li>
<li>red</li>
</ul>
</li>
<li>oranges</li>
<li>pineapples</li>
<li>banana</li>
</ul>
<table border="10" cellpadding="10" cellspacing="0">
<tr> <!-- table row-->
<th></th>
<th>Month</th> <!--table header-->
<th>Rent</th>
<th colspan="2">Utilities</th> <!-- span the colum into two-->
<th>Car Buget</th>
</tr>
<tr>
<td rowspan="3">Fall</td>
<td>June</td> <!--table data-->
<td>$1500</td>
<td>$150</td>
<td>$200</td>
<td>$15000</td>
</tr>
<tr>
<td>July</td> <!--table data-->
<td>$1500</td>
<td>$150</td>
<td>$200</td>
<td>$15000</td>
</tr>
<tr>
<td>August</td> <!--table data-->
<td>$1500</td>
<td>$150</td>
<td>$200</td>
<td>$15000</td>
</tr>
<Form>
<label for="">Email</label>
<input type="email" name="email" id="email">
<label for="">Password</label>
<input type="password" name="password" id="password">
<input type="submit" name="" id="">
<br>
<textarea name="text" id="" cols="30" rows="10"></textarea>
</Form>
</table>
</body>
</html>
<!-- <b> Is an opening tag, </b> closing tag-->