-
Notifications
You must be signed in to change notification settings - Fork 0
/
page4.html
127 lines (101 loc) · 5.79 KB
/
page4.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
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html>
<head>
<title>HTML Basic Concepts</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background: linear-gradient(90deg, rgba(135,252,70,1) 0%,rgba(63,94,251,1) 100%);
}
h1 {
color: #333;
text-align: center;
}
h2 {
color: black;
}
p {
color: #555;
line-height: 1.5;
}
ul {
list-style-type: disc;
padding-left: 20px;
}
.code {
font-family: Consolas, monospace;
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 20px;
}
.card {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
.card1{
background-color: rgba(255, 255, 255, 0.2);
border-radius: 5px;
padding: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="card"><h1><u>HTML Basic Concepts</u></h1></div>
<div class="card1"><h1><center><u>Introduction to HTML</u></center></h1></div>
<p>HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It defines the structure and layout of a web document by using various tags and elements.</p>
<div class="card1"><h1><center><u>HTML Document Structure</u></center></h1></div>
<p>An HTML document is structured using the following elements:</p>
<ul>
<li><code><!DOCTYPE></code>: Specifies the HTML version</li>
<li><code><html></code>: Root element of an HTML page</li>
<li><code><head></code>: Contains meta-information about the document</li>
<li><code><title></code>: Sets the title of the document</li>
<li><code><body></code>: Contains the visible content of the document</li>
<li><code><header></code>: Represents the introductory content of a page or section</li>
<li><code><nav></code>: Represents a section with navigation links</li>
<li><code><main></code>: Represents the main content of a document</li>
<li><code><footer></code>: Represents the footer of a document or section</li>
</ul>
<div class="card1"><h1><center><u>HTML Tags and Elements</u></center></h1></div>
<p>HTML consists of various tags and elements that define the structure and content of a web page. Some commonly used tags include:</p>
<ul>
<li><code><h1></code> to <code><h6></code>: Headings of different levels</li>
<li><code><p></code>: Paragraph</li>
<li><code><a></code>: Anchor link</li>
<li><code><img></code>: Image</li>
<li><code><ul></code> and <code><li></code>: Unordered list and list items</li>
<li><code><ol></code> and <code><li></code>: Ordered list and list items</li>
<li><code><table></code>: Table</li>
<li><code><form></code>: Form for user input</li>
<li><code><div></code
</ul>
<div class="card1"><h1><center><u>HTML Tables</u></center></h1></div>
<h2>What is a table?</h2>
<p>A table is a structured set of data made up of rows and columns (tabular data). It allows you to organize and present information in a structured format.</p>
<img src="numbers-table.png" alt="Sample Table" />
<h2>How does a table work?</h2>
<p>A table consists of rows and columns. Each cell within the table represents a unit of data. The table structure is created using HTML tags.</p>
<p>HTML tables are easily interpreted and accessible by screen readers, ensuring a good user experience for visually impaired users.</p>
<h2>Table Styling</h2>
<p>Tables can be styled using CSS to enhance their appearance and readability. You can apply CSS styles to the table, rows, cells, and headers to customize the table's look and feel.</p>
<p>For more advanced styling options, you can refer to the <a href="https://github.com/example-table">live example on GitHub</a>.</p>
<h2>When should you NOT use HTML tables?</h2>
<p>HTML tables should be used for tabular data and not for layout purposes. CSS layout techniques are preferred for creating page layouts.</p>
<p>Using tables for layout can reduce accessibility and result in complex markup. Tables are not automatically responsive, requiring additional measures for proper display on different devices.</p>
<h2>Active Learning: Creating your first table</h2>
<ol>
<li>Make a local copy of the <code>blank-template.html</code> and <code>minimal-table.css</code> files.</li>
<li>Enclose the table content within <code><table></code> tags.</li>
<li>Create table cells using <code><td></code> elements.</li>
<li>Group cells together using <code><tr></code> elements to form rows.</li>
</ol>
<h2>Adding headers with <code><th></code> elements</h2>
<p>Table headers provide additional context and improve data readability. They are denoted using the <code><th></code> element.</p>
<p>Replace the relevant <code><td></code> elements with <code><th></code> elements to define table headers.</p>