├── a-1702048418566-2x.jpg
├── Semantic-elements-in-HTML.webp
├── 68747470733a2f2f696d616765732e736c696465706c617965722e636f6d2f32392f393439323831342f736c696465732f736c6964655f322e6a7067.jpeg
├── 68747470733a2f2f7777772e73636d67616c6178792e636f6d2f7475746f7269616c732f77702d636f6e74656e742f75706c6f6164732f323032312f30352f68746d6c2d656c656d656e74732e706e67.png
├── 68747470733a2f2f7777772e636f646577697468666172617a2e636f6d2f696d672f4d6173746572696e672532307468652532305461626c65253230546167253230696e25323048544d4c25323041253230436f6d70726568656e7369766525323047756964652e6a7067.jpeg
├── README.md
└── HTMLcheatsheet.html


/a-1702048418566-2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/HEAD/a-1702048418566-2x.jpg


--------------------------------------------------------------------------------
/Semantic-elements-in-HTML.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/HEAD/Semantic-elements-in-HTML.webp


--------------------------------------------------------------------------------
/68747470733a2f2f696d616765732e736c696465706c617965722e636f6d2f32392f393439323831342f736c696465732f736c6964655f322e6a7067.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/HEAD/68747470733a2f2f696d616765732e736c696465706c617965722e636f6d2f32392f393439323831342f736c696465732f736c6964655f322e6a7067.jpeg


--------------------------------------------------------------------------------
/68747470733a2f2f7777772e73636d67616c6178792e636f6d2f7475746f7269616c732f77702d636f6e74656e742f75706c6f6164732f323032312f30352f68746d6c2d656c656d656e74732e706e67.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/HEAD/68747470733a2f2f7777772e73636d67616c6178792e636f6d2f7475746f7269616c732f77702d636f6e74656e742f75706c6f6164732f323032312f30352f68746d6c2d656c656d656e74732e706e67.png


--------------------------------------------------------------------------------
/68747470733a2f2f7777772e636f646577697468666172617a2e636f6d2f696d672f4d6173746572696e672532307468652532305461626c65253230546167253230696e25323048544d4c25323041253230436f6d70726568656e7369766525323047756964652e6a7067.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/HEAD/68747470733a2f2f7777772e636f646577697468666172617a2e636f6d2f696d672f4d6173746572696e672532307468652532305461626c65253230546167253230696e25323048544d4c25323041253230436f6d70726568656e7369766525323047756964652e6a7067.jpeg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # HTML for beginners
  2 | 
  3 | 
  4 | ## HTML Documentation for Beginner Web Developers
  5 | 
  6 | 1. Introduction to HTML
  7 |    1. What is HTML?
  8 |    2. Basic Structure of an HTML Document
  9 |    3. HTML Elements and Tags
 10 | 
 11 | 2. Text and Headings
 12 |    1. Paragraphs `<p>`
 13 |    2. Headings `<h1>` to `<h6>`
 14 |    3. Line Breaks `<br>`
 15 |    4. Horizontal Rules `<hr>`
 16 | 
 17 | 3. Links
 18 |    1. Anchor Tags `<a>`
 19 | 
 20 | 
 21 | 4. Images
 22 |    1. Adding Images `<img>`
 23 |    2. Image Attributes (Width, Height, Alt)
 24 | 
 25 | 5. Lists
 26 |    1. Unordered Lists `<ul>`
 27 |    2. Ordered Lists `<ol>`
 28 |       
 29 | 6. Tables
 30 |    1. Creating Tables `<table>`
 31 |    2. Table Rows `<tr>`
 32 |    3. Table Headers `<th>`
 33 |    4. Table Data `<td>`
 34 | 
 35 | 7. Forms
 36 |    1. Form Structure `<form>`
 37 |    2. Text Input `<input type="text">`
 38 |    3. Password Input `<input type="password">`
 39 |    4. Radio Buttons `<input type="radio">`
 40 |    5. Checkboxes `<input type="checkbox">`
 41 |    6. Dropdown Menus `<select>`
 42 |    7. Textareas `<textarea>`
 43 |    8. Submit Buttons `<input type="submit">`
 44 | 
 45 | 8. Divisions and Spans
 46 |    1. Divisions `<div>`
 47 |    2. Spans `<span>`
 48 | 
 49 | 9. Semantic Elements
 50 |    1. Headers `<header>`
 51 |    2. Navigation `<nav>`
 52 |    3. Main Content `<main>`
 53 |    4. Articles `<article>`
 54 |    5. Sections `<section>`
 55 |    6. Asides `<aside>`
 56 |    7. Footers `<footer>`
 57 | 
 58 | 10. Comments
 59 |     1. Adding Comments `<!-- -->`
 60 | 
 61 | 11. How to make everything more beautiful
 62 |     1. Style
 63 | 12. Ways to give style
 64 |     1. Style attribute
 65 |     2. Style tag`<style>`
 66 |     3. Link `<link>`
 67 |    
 68 |       
 69 | # 1. Introduction to HTML
 70 | # What is HTML ??
 71 | 
 72 | HTML stands for HyperText Markup Language. It is a standard markup language for web page creation. It allows the creation and structure of sections, paragraphs, and links using HTML elements (the building blocks of a web page) such as tags and attributes. 
 73 | 
 74 | 
 75 | ## Basic Structure of an HTML Document
 76 | ```html
 77 | <!DOCTYPE html>
 78 | <html>
 79 | <head>
 80 |     <title>My page title</title>
 81 | </head>
 82 | <body>
 83 |     <!-- Content -->
 84 | </body>
 85 | </html>
 86 | ```
 87 | 
 88 | ## 2.HTML Elements and tags
 89 | 
 90 | <img src="https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/main/68747470733a2f2f7777772e73636d67616c6178792e636f6d2f7475746f7269616c732f77702d636f6e74656e742f75706c6f6164732f323032312f30352f68746d6c2d656c656d656e74732e706e67.png" alt="html">
 91 | <img src="https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/main/68747470733a2f2f696d616765732e736c696465706c617965722e636f6d2f32392f393439323831342f736c696465732f736c6964655f322e6a7067.jpeg">
 92 | 
 93 | 
 94 | ## Text and Headings
 95 | 
 96 | ### Headings h1 to h6
 97 | 
 98 | <img src="https://github.com/AHGh1386/HTML-for-beginners/blob/main/a-1702048418566-2x.jpg">
 99 | 
100 | ### Paragraphs `<p>` 
101 | 
102 | ```html
103 |     <p> THis is a paragragh </p>
104 |     <p> This is another paragragh </p>
105 | ```
106 | 
107 | ### Line Breaks `<br>` <br>
108 | Headings define the hierarchy of the text on the page.
109 | ```html
110 | <p>This is the first line.<br>This is the second line.</p>
111 | 
112 | ```
113 | ### Horizontal Rules `<hr>`
114 | Horizontal rules create a visual break between content.
115 | ```html
116 | <p>This is some content.</p>
117 | <hr>
118 | <p>This is more content.</p>
119 | 
120 | ```
121 | 
122 | ## 3. Links
123 | ### Anchor Tags `<a>`
124 | Anchor tags are used to create hyperlinks that allow users to navigate between web pages.
125 | ```html
126 | <a href="https://www.google.com">Visit google</a>
127 | ```
128 | You can alson make an image to a link:
129 | 
130 | ```html
131 | <a href = "https://www.google.com"><img src="Link of an image"></a>
132 | ```
133 | ## 4.Adding images
134 | You can add images from the internet or you can add images from your files.
135 | 
136 | ```html
137 | <img src="Link of the image">
138 | <img src="NameOftheFolder/image.jpg>
139 | ```
140 | 
141 | ### Image Attributes (Width, Height, Alt)
142 | 
143 | width and height are clear. 
144 | alt is for when your image has some problems in uploading:
145 | ```html
146 | <img src="linkOfaImage" alt="hello">
147 | ```
148 | In this code if your image does not upload, it will write something to say that what this image is about.
149 | 
150 | ## 5.Lists
151 | 
152 | ### unordered lists
153 | 
154 | ```html
155 | <ul>
156 |     <li>List item1<li>
157 |     <li>List item2<li>
158 |     <li>List item3<li>
159 |     <li>List item4<li>
160 |     <li>List item5<li>
161 |     <li>List item6<li>
162 | </ul>
163 | ```
164 | 
165 | ### Ordered lists
166 | 
167 | ```html
168 | <ol>
169 |     <li>List item1<li>
170 |     <li>List item2<li>
171 |     <li>List item3<li>
172 |     <li>List item4<li>
173 |     <li>List item5<li>
174 |     <li>List item6<li>
175 | </ol>
176 | ```
177 | 
178 | # 6.Tabels
179 | 
180 | <img src="https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/main/68747470733a2f2f7777772e636f646577697468666172617a2e636f6d2f696d672f4d6173746572696e672532307468652532305461626c65253230546167253230696e25323048544d4c25323041253230436f6d70726568656e7369766525323047756964652e6a7067.jpeg">
181 | 
182 | 
183 | # 9.Semantic Elements
184 | 
185 | <img src="https://raw.githubusercontent.com/AHGh1386/HTML-for-beginners/main/Semantic-elements-in-HTML.webp">
186 | 
187 | # 11.What is style:
188 | you can give style to elements of html with css to make them more beautiful.
189 | For example for a `<p>` you can change the Font size, Font family , Font weight and etc.
190 | 
191 | # 12.Ways to give style:
192 | 
193 | ## style attribute:
194 | 
195 | ```html
196 | <p style= our style></p>
197 | ```
198 | 
199 | ## style tag `<style>`
200 | 
201 | you must use this tag in head.
202 | 
203 | ### Example:
204 | 
205 | ```html
206 | <!DOCTYPE html>
207 | <html>
208 | <head>
209 |     <title>My page title</title>
210 | 
211 |     <style>
212 | 
213 |       the style that we want
214 | 
215 |     </style>
216 | </head>
217 | <body>
218 |      <!-- Content -->
219 | </body>
220 | </html>
221 | ```
222 | 
223 | ## stylesheet link
224 | 
225 | ### Example:
226 | 
227 | ```html
228 | <!DOCTYPE html>
229 | <html>
230 | <head>
231 |     <title>My page title</title>
232 |     <link rel="stylesheet" href="filename.css" type=""text/css>
233 |     
234 | </head>
235 | <body>
236 |      <!-- Content -->
237 | </body>
238 | </html>
239 | 
240 | ```
241 | 
242 | Don't worry if i don't mention something in this readme because you can find them in HTMLcheatsheet.html
243 | 
244 | If you wanna know about CSS, 
245 | you can visit my another repository
246 | (CSS for begginers)
247 | 
248 | ### Give star⭐ if it was useful 😉
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 
255 | 
256 | 


--------------------------------------------------------------------------------
/HTMLcheatsheet.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>HTML5 Cheat Sheet</title>
  5 |   </head>
  6 | 
  7 |   <body>
  8 |     <a href="blog.html">Go to Blog</a>
  9 | 
 10 |     <!-- Headings -->
 11 |     <h1>Heading one</h1>
 12 |     <h2>Heading two</h2>
 13 |     <h3>Heading three</h3>
 14 |     <h4>Heading four</h4>
 15 |     <h5>Heading five</h5>
 16 |     <h6>Heading six</h6>
 17 |     <!-- Paragraph -->
 18 |     <p>
 19 |       Lorem ipsum dolor sit amet, <strong>consectetur adipisicing</strong> elit,
 20 |       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
 21 |       ad minim veniam, quis nostrud exercitation
 22 |       <em>ullamco laboris nisi ut aliquip</em> ex ea commodo consequat.
 23 |       <b>Duis aute</b> irure dolor in reprehenderit in voluptate velit esse
 24 |       cillum dolore eu fugiat nulla
 25 |       <a href="https://google.com" target="_blank">pariatur</a>. Excepteur sint
 26 |       occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
 27 |       anim id est laborum.
 28 |     </p>
 29 |     <p>
 30 |       Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, quaerat
 31 |       ex dolore rem dicta ducimus provident laborum, tempora minima obcaecati
 32 |       laudantium iste natus? Distinctio, dicta. Voluptatem officiis recusandae
 33 |       in cupiditate!
 34 |     </p>
 35 | 
 36 |     <!-- Lists -->
 37 |     <ul>
 38 |       <li>List Item 1</li>
 39 |       <li>List Item 2</li>
 40 |       <li>List Item 3</li>
 41 |       <li>List Item 4</li>
 42 |       <li>List Item 5</li>
 43 |     </ul>
 44 |     <ol>
 45 |       <li>List Item 1</li>
 46 |       <li>List Item 2</li>
 47 |       <li>List Item 3</li>
 48 |       <li>List Item 4</li>
 49 |       <li>List Item 5</li>
 50 |     </ol>
 51 | 
 52 |     <!-- Tables -->
 53 |     <table>
 54 |       <thead>
 55 |         <tr>
 56 |           <th>Name</th>
 57 |           <th>Email</th>
 58 |           <th>Age</th>
 59 |         </tr>
 60 |       </thead>
 61 |       <tbody>
 62 |         <tr>
 63 |           <td>Abolfazl</td>
 64 |           <td>Abolfazl@gmail.com</td>
 65 |           <td>16</td>
 66 |         </tr>
 67 |         <tr>
 68 |           <td>Joe</td>
 69 |           <td>Joe@gmail.com</td>
 70 |           <td>30</td>
 71 |         </tr>
 72 |         <tr>
 73 |           <td>Jack</td>
 74 |           <td>Jack@gmail.com</td>
 75 |           <td>34</td>
 76 |         </tr>
 77 |       </tbody>
 78 |     </table>
 79 | 
 80 |     <br />
 81 |     <hr />
 82 |     <br />
 83 | 
 84 |     <!-- Filedset -->
 85 |     <fieldset>
 86 |       <!-- Legend -->
 87 |       <legend>Personal information's</legend>
 88 |       <!-- Forms -->
 89 |       <form action="about.py" method="POST">
 90 |         <div>
 91 |           <!-- lable -->
 92 |           <label for="firstname">First Name</label>
 93 |           <!-- textfeild -->
 94 |           <input
 95 |             type="text"
 96 |             id="firstname"
 97 |             name="firstName"
 98 |             size="25"
 99 |             placeholder="Enter Your First Name"
100 |           />
101 |         </div>
102 |         <br />
103 |         <div>
104 |           <label>Last Name</label>
105 |           <input
106 |             type="text"
107 |             name="lastName"
108 |             size="25"
109 |             placeholder="Enter Your Last Name"
110 |           />
111 |         </div>
112 |         <br />
113 |         <div>
114 |           <label>Email</label>
115 |           <input type="email" name="email" />
116 |         </div>
117 |         <br />
118 |         <div>
119 |           <label for="message">Message</label>
120 |           <!-- textarea -->
121 |           <textarea id="message" name="message" rows="30" cols="50"></textarea>
122 |         </div>
123 |         <br />
124 |         <div>
125 |           <!-- dropdown list -->
126 |           <label>Gender</label>
127 |           <select name="gender" id="">
128 |             <option value="male">Male</option>
129 |             <option value="female">Female</option>
130 |             <option value="other">Other</option>
131 |           </select>
132 |         </div>
133 |         <br />
134 |         <div>
135 |           <!-- number -->
136 |           <label>Age:</label>
137 |           <input type="number" name="age" value="30" min="0" max="100" />
138 |         </div>
139 |         <br />
140 |         <div>
141 |           <!-- date tag -->
142 |           <label>Birthday:</label>
143 |           <input type="date" name="birthday" />
144 |         </div>
145 |         <br />
146 | 
147 |         <!-- radio button -->
148 |         Yes:
149 |         <input type="radio" name="yesorno" value="y" />
150 |         No:
151 |         <input type="radio" name="yesorno" value="n" />
152 | 
153 |         <br />
154 |         <br />
155 | 
156 |         <!-- checkbox -->
157 |         Which item are you interested in?<br />
158 |         <input type="checkbox" name="apple" checked="checked" id="" />
159 |         Apple<br />
160 |         <input type="checkbox" name="orange" id="" /> Orange<br />
161 |         <input type="checkbox" name="banana" id="" /> Banana<br />
162 |         <input type="checkbox" name="lemon" id="" /> Lemon<br />
163 | 
164 |         <br />
165 |         <br />
166 | 
167 |         <!-- submit -->
168 |         <input type="submit" name="submit" value="Submit" />
169 |       </form>
170 |     </fieldset>
171 | 
172 |     <br />
173 |     <!-- A single button -->
174 |     <button click="someFunction">Click Me</button>
175 | 
176 |     <br />
177 |     <hr />
178 |     <br />
179 | 
180 |     <!-- Images -->
181 |     <a href="images/gandalf.jpg">
182 |       <img
183 |         src="images/gandalf.jpg"
184 |         title="Gandalf"
185 |         alt="Gandalf"
186 |         width="300"
187 |         height="100"
188 |       />
189 |     </a>
190 | 
191 |     <br />
192 |     <hr />
193 |     <br />
194 |     <!-- Iframe -->
195 |     <iframe
196 |       width="200"
197 |       height="200"
198 |       src="blog.html"
199 |       frameborder="1"
200 |       name="myiframe"
201 |     >
202 |       Do you see this?
203 |     </iframe>
204 |     <br />
205 |     <a href="https://www.varzesh3.com" target="myiframe">Check Google.com</a>
206 | 
207 |     <br />
208 |     <br />
209 |     <br />
210 |     <!-- An audio tag -->
211 |     <audio controls="audiocontrols" src="sounds/Don't-Wanna-MissA-Thing.mp3">
212 |       <!-- <source src="sounds/Don't-Wanna-MissA-Thing.mp3"> -->
213 |       Audio
214 |     </audio>
215 | 
216 |     <br />
217 |     <br />
218 |     <br />
219 | 
220 |     <!-- A video tag -->
221 |     <video
222 |       controls="videocontrols"
223 |       src="videos/Game-of-Thrones-HBO.mp4"
224 |       width="300"
225 |       height="300"
226 |     >
227 |       Video
228 |     </video>
229 | 
230 |     <br />
231 |     <br />
232 |     <br />
233 |     <hr />
234 |     <br />
235 | 
236 |     <!-- Quotations -->
237 |     <blockquote cite="https://www.youtube.com">
238 |       Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quidem beatae
239 |       culpa nulla ut quasi alias suscipit esse repudiandae expedita illum quo ea
240 |       assumenda porro doloribus odit, asperiores, maxime sapiente cum!
241 |     </blockquote>
242 | 
243 |     <br />
244 |     <hr />
245 |     <br />
246 | 
247 |     <p>
248 |       <!-- An abbreviation tag -->
249 |       This is the <abbr title="United States of America">USA</abbr> Military
250 |     </p>
251 | 
252 |     <br />
253 |     <hr />
254 |     <br />
255 | 
256 |     <p>
257 |       <!-- A citation tag -->
258 |       This is <cite>HTML Full Course</cite> by Ali Darvishi
259 |     </p>
260 | 
261 |     <!-- Escape Characters -->
262 |     &nbsp; &#8482; &amp; &it; &gt; &#63; &copy;
263 |     <sup>ok</sup>
264 |     <sub>ok</sub>
265 | 
266 |     <div style="margin-top: 500px"></div>
267 |   </body>
268 |   </html
269 | 


--------------------------------------------------------------------------------