What is HTML?
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.
HTML Elements
The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"
<a href="https://www.w3schools.com">Visit W3Schools</a>
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
<img src="img_girl.jpg">
<img src="img_girl.jpg" width="500" height="600">
<img src="img_girl.jpg" alt="Girl with a jacket">
<p style="color:red;">This is a red paragraph.</p>
<p title="I'm a tooltip">This is a paragraph.</p>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1>Heading 1</h1>
<h6>Heading 6</h6>
HTML Paragraphs
The HTML <p> element defines a paragraph.
<p>This is a paragraph.</p>
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
HTML Line Breaks
The HTML <br> element defines a line break.
<p>This is<br>a paragraph<br>with line breaks.</p>
HTML <pre> Element
The HTML <pre> element defines preformatted text.
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.
</pre>
HTML Formatting Elements
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
<q> - short quotation
Ex : - <p>My favorite color is <del>blue</del> red.</p>
Define an HTML Table
td stands for table data.
tr stands for table row.
th stands for table header.
<table>
<tr>
<th>Person 1</th>
<th>Person 2</th>
</tr>
<tr>
<td>Emil</td>
<td>Tobias</td>
</tr>
<tr>
<td>16</td>
<td>14</td>
</tr>
</table>
HTML Lists
An unordered list starts with the <ul> tag
An ordered list starts with the <ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
</ol>
HTML Div Element
The <div> element is often used to group sections of a web page together.
<div>
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>London has over 13 million inhabitants.</p>
</div>
HTML Input Element
The <input> tag is used to create various types of form elements, such as text fields, checkboxes, radio buttons, submit buttons, and more. The type of <input> element is specified using the type attribute.
Common Attributes
- type: Specifies the type of input element.
- name: Specifies the name of the input element. This name is sent to the server with the form data.
- value: Specifies the initial value of the input element.
- placeholder: Provides a short hint that describes the expected value of the input field.
- required: Specifies that the input field must be filled out before submitting the form.
- readonly: Specifies that the input field is read-only.
- disabled: Specifies that the input field is disabled.
- maxlength: Specifies the maximum number of characters allowed in the input field.
<input type="text" name="username" placeholder="Enter your username">
<input type="password" name="password" placeholder="Enter your password">
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="submit" value="Submit">
HTML Select Element
The <select> tag is used to create a drop-down list. It contains one or more <option> elements that define the available options in the list.
Common Attributes
name: Specifies the name of the drop-down list. This name is sent to the server with the form data.
multiple: Allows multiple selections if present.
size: Specifies the number of visible options in the drop-down list.
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
HTML Label Element
The <label> tag in HTML is used to define labels for <input> elements. It is a key component in forms
The <label> tag can be used in two ways:
Implicit Association: Wrapping the input element inside the <label> tag.
<label>Username:
<input type="text" name="username">
</label>
Explicit Association: Using the for attribute of the <label> tag to refer to the id of the input element.
<label for="username">Username:</label>
<input type="text" id="username" name="username">
How to link style.css to index.html ?
Create styles.css and add below content under <head> tag
<link rel="stylesheet" href="styles.css">
- display: flex is a CSS property that makes an element a flex container,
- justify-content: space-around is a property used in flexbox to distribute space between and around flex items along the main axis
- Section: The <section> tag defines a section in a document. It is used to group together related content, typically with a heading.
- Span: The <span> tag is an inline container used to mark up a part of a text or a part of a document.
- position: absolute is a CSS property that removes an element from the normal document flow and positions it relative to its closest positioned ancestor (an element with a position of relative, absolute, or fixed).
- transform: translate(-50%, -50%) is a CSS transform property that moves an element along the X and Y axes. In this case, it shifts the element by -50% of its own width to the left and -50% of its own height up. This is commonly used for centering an element both horizontally and vertically.
- The <nav> tag defines a set of navigation links. It is intended for major navigational blocks such as menus, tables of contents, or indexes.
- hover is a CSS pseudo-class used to apply styles to an element when the user hovers over it with a mouse or similar pointing device. It is commonly used for creating interactive effects on buttons, links, and other elements.
No comments:
Post a Comment