💻 HTML 1-29 Full 💻
Full HTML5 tutorial, with many elements explained in the tutorial
HTML
1. Introduction
- is a markup language for creating web pages
- stands for Hyper Text Markup Language
- has a list of elements
Install VSCode
- https://code.visualstudio.com/download
- in description links install vscode
Hello World
- type html5 to vscode to add the template
Run the html file
- install live code in vscode
- run the file
- or open it with a web browser
Explanation
- defines an HTML5 document
- root element of an HTML file
- contains metada(data about the data)about the HTML file
- the title of the HTML file(check the browser title bar)
- contains all the visible elements of the HTML file
- the largest heading
2. Elements
- an element has an opening tag, attributes, content and a closing tag (show h1 heading)
- opening tag closing tag
- Hello world -> content
- Don’t forget to close an element, always use the closing tag for the element
- elements can contain other elements (show body element)
- empty elements donot have content
- W3C recommends lowercase in HTML
- element attributes gives more information about it. They are optional
- the attributes are written inside the opening tag
- an attribute have a name and a value
- there are 4 attribute categories
- universal attributes that can be used in almost all elements
- specific attributes than can be used in specific element
- event attributes that are used to trigger an event
- data attributs to store information
- Universal attributes
- id indentifies an element id=”example”
- class assign an element to a class class=”cars”
- style defines the style for the eleement style=”color: blue; font-size: 2em”
- title appears on mouse hover title=”exampletext”
- lang defines the language
- dir defines text’s direction dir=”ltr” or rtl
3. Headings
start the video showing the result of all headings.First print all the headings. The remove them and make the file contents for something. like this book.
- there are 6 Headings, h1,h2,h3,h4,h5,h6
- h1 is the most important heading, while h6 is the least important
- headings can be used to construct a table of contents for a document
- always start with h1, next h2 and so on
- do not use heading to style/resize text
- use only one h1 element on a page
- more information on https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
4. Paragraph, Preformated text and Line Break
start the video writing a paragraph in the previous example with the headings
- represents a text paragraph
- starts in a new line with a small space above
- the browser will remove the extra spaces and lines
add a br to the paragraph
- Line break br/ adds a line break, new line.
add a pre element and write the above text in p without the breaks.
represents a preformatted text
the text will be shown in the browser as written in the HTML filee
5. b, strong, i, em, mark elements
Type the code for each one
<p>
Important courses are <b>gym</b> and <b>break</b>
</p>- bold text. does not have such special semantic information like . It is to draw attention without indicating that it’s more important
- if there is no semantic purpose to use it, then you should use css for styling instead if you want to make the text bold.
<p>
no matter what he says <strong>never answer to him</strong>.
</p>- Indicates that its contents have strong importance, seriousness or urgency
- Browser render the contents in bold
- It should not be used to apply bold styling
<p>
The term <i>memory</i> describes...
<p>- indicates that the text is with different semantic meaning that the surroungind text.
- like thoughts, terms from another language, alternative voice or mood
- do not use it for styling purposes
<p>
it contains <em>egg</em>
<p>- emphasized text, represents stress emphasis of its contents. Often limited to the words that affects the meaning of the sentence
<p>
Several species of <mark>snails</mark>
<p>– represents a highlighted text for notation/reference purposes
6. del, ins, sub, sup elements
<del datetime="2024-05-05T00:00:00Z">This was deleted</del>- represents a deletion from a document
- It is used to highlight text that has been deleted and showing changes in a document
- It is styled with a strikethrough line
- datetime attribute specifies when the element was removed
<p>This is the new <ins datetime="2024-05-05T00:00:00Z">inserted</ins> text that has been added.</p>- It represents an addition to the documents.
- It is styled with an underline
- dateime attribute specifies when the element was inserted
<p>The chemical formula for water is H<sub>2</sub>O.</p>- It represents inline text which is subscripted
- It appears below the normal line of the text
- It is often used for chemical formulas, mathematical expressions etc
<p>The chemical formula for water contains two hydrogen atoms and one oxygen atom<sup>1</sup>.</p>- It represents a supscripted text
- It appears above the normal line of text
- It is often used or chemical formulas, mathematical expressions etc
7. blockquote, q, abbr, address, cite, bdo
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</blockquote>- blockquote is a container for a section of text which indicates a quote
- It can contain one or more paraghraphs
- It may also contain other inline elements like em, strong or even code
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <q>In hac habitasse platea dictumst!</q></p>- q element is used to represemt a short inline quotation within a larger text
- It contains one or more words or sentences that are meant to be highlightes as a quote
<p>The <abbr title="Academy Awards">Oscars</abbr> are presented annually by the Academy of Motion Picture Arts and Sciences.</p>- abbr(abbreviation) element is used to define an abbreviation that is ment to be explained within the surrounding text.
- It contains a short form of a word, followed by the full explanation in the ‘title’ attribute
<p>The company's headquarters are located at:</p>
<address>
Somewhere in Europe
</address>- address element defines an adrress or contact information
- It containes one or more lines of text with contact/adress information
- It can contain address, email address and phone number
<p>According to <cite>Kronos</cite>, "Lorem ipsum dolor sit amet."</p>- cite elements identifies the source of a quotation, referece or block of text
- It can contain a URL, page number or other identification information
<bdo dir="rtl">
This text should be displayed in the right-to-left direction
</bdo>- bdo element specifies the direction in which the text should be displayed
- It is used in documents in languages that are written in right-to-left, Arabic, Hebrew
- It overrides the bidirectional formatting rules of the surrounding text
8. Comments and anchor element in HTML
Comments
<!-- This is a comment -->
<p>This is some text</p>
<!--
<p>This is another text</p>
-->- Comments are important, they help improve the readability of the code
- You can use them leave notes about your code
- You can also use them to temporarily disable parts of the code
<a href="https://www.google.com>Click here to visit Google</a>
<a href="7.html">Lesson 7</a>
<a href="7.html" target="_blank">Lesson in a new tab/window</a>
<a title="Send email to me" href="mailto:me@example.com">Send email</a>- Anchor element creates hyperlinks and by clicking them you be taken to another webpage/website
- It can contain other elements like text and images
- href attribute specifies the webpage/website that the user will be redirected
- it can take absolute(https://www.google.com) or relative url(a webpage within the same document -> 7.html)
- target attribute specifies where the new webpage will be opened
- target values can be _self(default same tab/window, _blank(new tab/window), _parent(in the parent frame), _top(in the full body of the window)
- mailto: inside href attribute will open user’s default email client/program
- title attribute shows more information about any element, not only the anchor element
9. img, map and area elements
<img src="path/to/image" alt="description of the image" width="600" height="400">- The image element is used to add an image into a webpage
- You can specify the image source with the src attribute
- The src attribute can take relative or absolute URL
- alt attribute provides an alternative text for the users who cannot see the image
- width and height attributes specify the width and the height of the image
<img src="path/to/image" usemap="#image-map">
<map name="image-map">
<area shape="rect" coords="316,11,603,198" alt="Lesson 5" href="5.htlm">
<area shape="rect" coords="100,280,230,555" alt="Lesson 6" href="6.htlm">
<area shape="rect" coords="244,215,608,566" alt="Lesson 7" href="7.htlm">
</map>- map is used to create an interactive image map
- Allows to users to click on specific areas within the image and navigate to different pages
- usemap attribute in specifies the id of the map that will be used
- map’s attribute name specifies the id/name of the map
- map contains one or more area elements which represents a clickable area
- shape attribute specifies the shape of the area (rect, circle and polygon)
- cords attribute specifies the coordinates of the area(x1, y1, x2, y2)
- href attribute specifies the URL for when the user clicks on the area
10. picture, source element and favicon
picture & source
<picture>
<source srcset="cat-small.jpg" media="(max-width: 768px)">
<source srcset="cat-medium.jpg" media="(min-width: 769px) and (max-width: 1024px)">
<source srcset="cat-large.jpg" media="(min-width: 1025px)">
<img src="catt.jpg" alt="A picture with a cat">
</picture>- picture element allows you to provide multiple versions of an images (different sizes and resolutions)
- It can automatically select the most appropriate version based on device screen or user preferences
- It can also be used to support different image formats
- the img element specifies the default version of the image
- source elements specify alternative image version(s)
- srcset attribute specifies the URL of image
- media attribute specifies the media query, in other words which image is correct to show
<link rel="icon" href="favicon.ico" type="image/x-icon">- favicon is a small icon that represents a website
- It appears in the browser tab and bookmarks bar
- It help uses to identify quickly which website is in each tab
- link elements specifies the relationship between the HTML document and external resource
- rel attribute specifies that the linked file is favicon
- href attribute specifies the favicon’s URL
- Modern browsers support ico, png, gif, jpeg and svg formats
11 – tables
<table>
<caption>Product list</caption>
<tr>
<th colspan="2">Product Name</th>
<th>Price</th>
</tr>
<tr>
<td>Product A</td>
<td>Product A</td>
<td>$10.99</td>
</tr>
<tr>
<td>Product B</td>
<td>Product B</td>
<td>$25.49</td>
</tr>
</table>- Tables in HTML are used to display tabular data
- such as list of products, calendars, list of customers etc.
- table element defines a table
- a table contains rows
- table rows contain cells
- table rows can also contain table headers that define the header titles
- table headers can also be vertical by puting them on the first cell of each row
- colspan attribute spawns the column over two or more columns
- rowspan attribute spans a cell over two or more columns
- caption element adds a heading for the whole table and should be added after
<table>tag
12 – uordered, ordered lists, list items and description list
unordered list
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>- Unordered list is a list that does not have a numbered sequence
- It is used when it is not imporant for the items to be in order
- You can add as many items you need using the list item element
- You can also have nested lists
ordered list
<ul type="1">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>- Ordered list has a numbered sequence
- It is used when the order of the list items is important
- You can also have as many items you need using the list item element
- type attribute defines the way the items will be numbered
- with 1, the sequence will be 1,2,3…
- with a, the sequence will be a,b,c…
description list
<dl>
<dt>Term 1</dt>
<dd>Definition of Term 1.</dd>
<dt>Term 2</dt>
<dd>Definition of Term 2.</dd>
<dt>Term 3</dt>
<dd>Definition of Term 3.</dd>
</dl>- description or definition list provides definitions for terms
- dt element marks the definition list terms
- dd element marks the definitions
- You can add as many definitions list terms and definitions to the list by adding more dt and dd elements
13 – Inline and block level elements
<div >
<h1>The title of this page</h1>
<p>This is a paragraph of text on the page.</p>
<p><img src="cat.jpg" alt="Description of image"></p>
<p><a href="https://www.example.com">Link to an external website</a></p>
<p><span>This is a highlighted section of text.</span></p>
</div>- Block-level elements are used to format the layout of a page
- They start on a new line and take up the full width available
– They can also contain other block-level elements.
<b> <h1> <div> <table> <ul> <ol> and more- Inline-level elements are used to format text within a block-level element
- They do not start on a new line
- They only take up the necessary width to contain their content
<span> <img> <a> <b> <em> <i> <cite> <input> <label> and more14 – div element
<div class="hero">
<h2>Hero Section</h2>
<p>This is a hero section with an image and some text.</p>
</div>
<div class="features">
<h3>Features</h3>
<ul>
<li>Feature 1</li>
<li>Feature 2</li>
<li>Feature 3</li>
</ul>
</div>- div element is a block-level element
- It is used for organizing and styling its content
- It can also be used to create sections or groups of related elements
- It creates a structured and organized web page
- class attribute specifies a CSS class for an element
- This class styles the element
- One or more element can use the same class
15 – iframe element
<iframe src="https://www.google.com" width="600" height="400" allowfullscreen title="External" name="itarget">
</iframe>
<a href="https://fedoraproject.org/" target="itarget">Fedora OS</a>- iframe element is a container for another HTML document
- It allows to embed another wepbade within the current one
- It is useful for displaying content from another websites
- src attribute spicifies the HTML document
- width and height attributes specify the dimensions
- frameborder attribute removes the frame border if set to 0
- scrolling attribute specifies the scrolling handling yes|auto|no
- allowfullscreen attribute allows the user to request full-screen mode for the iframe
- Using anchor element, and its attribute target, you can target an iframe to show/change the HTML document
16 – head element
<head>
<title>My Page</title>
<meta charset="UTF-8">
<meta name="description" content="An example">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://mydomain.com/" target="_blank">
<link rel="stylesheet" href="styles.css">
<style>
body{
background-color: blue;
color:white;
}
</style>
<script>
alert("Welcome")
</script>
<script src="scripts.js"></script>
</head>
<body>
<p>Welcome!</p>
</body>- The head element is used to contain metadata and other elements that are not displayed on the web page
- Those metadate are important for the proper functioning of the page.
- The most common use of the head element is to contain the title of the page
- It is displayed at the top of the browser window/tab
- head can also contain a meta element to specify the character encoding of the document.
- It is important because different documents may use different character sets
- meta with description name specifies the page’s description
- meta with keywords name specifies keywords for the search engines
- meta with viewport name makes your webpage to look nice on all devices
- base element defines the base URL for all relative URLs in the webpage
- A webpage can only have one base element.
- link element with stylesheet rel attribute link to an external CSS/style file
- style element gives you the opportunity to style the document using CSS
- script element is used to define JavaScript code.
- If you use the src attribute then you can import a javascript file.
17 – Layout elements
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
</header>
<section>
<article>
<h2>My Latest Blog Post</h2>
<p>This is my latest blog post, featuring some great tips and tricks for web development.</p>
</article>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Web Development Tutorials</a></li>
<li><a href="#">Design Inspiration</a></li>
</ul>
</aside>
<footer>
<p>© My Website, 2023</p>
</footer>
</section>
<details>
<summary>FAQ</summary>
<p>Here are some frequently asked questions:</p>
<ul>
<li><a href="#">How do I get started?</a></li>
<li><a href="#">What are the best tools?</a></li>
</ul>
<footer>
<p>This is the outside footer</p>
</footer>
</details>- All those elements are semantic elements. But there are more semantic elements than those.
- Semantic elements are elements with a meaning.
- Non-semantic elements are div and span
- header element defines a section that contains information about the page
- nav element defines a section that contains the navigation links to other pages or sections
- section element defines a generic section
- It can contain any kind of content(articles, images, paragrapghs etc)
- article element defines a self-contained piece of content
- It is often used inside a section element to indicate that the content is standalone
- aside element defines a section that contains supplementary information.
- It can also contain a sidebar with related links or pages
- footer element defines the footer section of the page
- It typically contains information about copyright status and other various information or links
- details element defines a section with additional information
- This section can be toggled to display additional information
- It always contains a summary element
- summary defines a summary or heading for the details elements.
- Typically by clicking it expands the details to see the full content
18 – code, var, kbd, samp and pre elements
<p>Here is some <code>HTML</code> code:</p>
<p>2 + <var>x</var> = <math>2 + x</math></p>
<p>To save your progress, press <kbd>Ctrl + S</kbd></p>
<samp>The quick brown fox jumps over the lazy dog.</samp>
<pre>
<code>
// this is Javascript
function add(x, y) {
return x + y;
}
</code>
</pre>- code element indicates that its content should be treated as code
- var element is used to define variable in mathematical equation or programming expression
- kbd element indicates a keyboard input.
- samp element represents a sample text from a larget text or an article
- pre element defines a preformatted text, often used for code.
19 – Entities, Symbols and Emojis in HTML
Entities and symbols
< less than (<) <br>
> greater than (>) <br>
& ampersand (&) <br>
" quotation mark (") <br>
' apostrophe (') <br>
é Euro currency symbol (€) <br>
£ pound sterling symbol (£) <br>
¢ cent symbol (¢) <br>
¤ currency symbol (¤) <br>
¥ yen symbol (¥) <br>
™ trademark symbol (™) <br>
® registered trademark symbol (®) <br>
© copyright symbol (©) <br>
&iexacute; soft hyphen (-) <br>
§ section symbol (§) <br>
¶ paragraph symbol (¶) <br>
‐ en dash (–) <br>
‰ per mille sign (‰) <br>
× times symbol (×) <br>
÷ division symbol (÷) <br>
+ plus sign (+) <br>
− minus sign (-) <br>
· middle dot (·) <br>
² superscript two (²) <br>
³ superscript three (³) <br>
´ acute accent (á é í ó ú) <br>
á acute accent (à è ì î ò ú) <br>
é acute accent (é â ê ë ï î ô ü) <br>
ó acute accent (ô û) <br>
ú acute accent (ú û) <br>
ć acute accent (ç Ç) <br>
é acute accent (è â ê ë ï î ô ü) <br>
ú acute accent (ù ú û) <br>
ć acute accent (ç Ç) <br>
ŕ acute accent (ř Ř) <br>
&cuml; cumulus sign (∫) <br>
&summation; summation sign (∑) <br>
∏ product sign (∏) <br>
√ radical symbol (√) <br>
&divisionslash; fraction slash (÷) <br>
&fraction; fraction symbol (½ ¾) <br>
∫ integral sign (∫) <br>
∴ therefore symbol (therefore) <br>
∼ not equal to (≈) <br>
⊂ subset of (∋) <br>
⊃ superset of (∈) <br>
⊄ not a subset of (∋) <br>
⊆ subset of or equal to (∋) <br>
⊇ superset of or equal to (∈) <br>
¬ logical NOT operator (!) <br>
∀ for all (∀) <br>
&exists; there exists (∃) <br>- Entity is a way to represent special characters or symbols that are reserved from HTML or not available on all systems
- You can also define custom entities like
Emojis
<meta charset="utf-8">
<p>😂 Hello! (wave)</p>
<p>😎 Smiling face with smiling eyes</p>
<p>😀 Beaming face with smiling eyes</p>
<p>😶 Face with rolling eyes</p>
<p>🤦 Thinking face</p>
<p>🥊 Nerdy face with monocle and lab coat</p>
<p>🎍 Performing arts</p>
<p>🎭 Palette with paintbrush and roll of paper</p>
<p>🚲 Muscle man flexing</p>
<p>🚀 Rocket ship</p>
<p>🌄 Globe with meridians of longitude</p>
<p>🌟 Sun with rays</p>
<p>🌭 Waning crescent moon</p>
<p>🥉 Pine tree in fall colors</p>
<p>🚁 Person skating on ice</p>
<p>🎅 Gift with ribbon</p>
<p>✃ Opening gift</p>
<p>🥪 Closed book with curling corners</p>
<p>🙋 Broken heart</p>
<p>🥵 Face blowing a kiss</p>
<p>🍳 Sleeping face</p>
<p>😍 Person frowning</p>
<p>🤨 Angry face with clenched teeth and upraised eyebrows</p>
<p>🤧 Disappointed but not completely defeated face</p>
<p>🙂 Confused but trying to understand face</p>
<p>🧓 Face with symbol over eyes</p>
<p>🤒 Thinking face with raised eyebrows and hand on chin</p>
<p>🙈 Zipper-mouthed face</p>
<p>😷 Unamused or unimpressed face</p>
<p>😭 Crystal ball weeping face</p>
<p>🧨 Person in a lotus position</p>
<p>🙊 Man lifting a heavy weight</p>
<p>🏀 Person doing acrobatics</p>
<p>🏊 Motion picture camera</p>
<p>🎞 Television with power button turned on</p>
<p>📧 Telephone receiver</p>
<p>🥋 Magnifying glass</p>
<p>🏅 Stage with curtains and stage lights</p>
<p>👝 Movie ticket stubs</p>
<p>🍻 Person with popcorn in their hands</p>
<p>🏀 Pine tree during the winter season</p>
<p>🎅 Person riding a skateboard</p>
<p>🚎 Gymnast doing handstands</p>
<p>👌 Woman gesturing with both hands</p>
<p>🚂 Man lifting a heavy weight</p>
<p>🧗 Girl and boy hugging</p>
<p>🌈 Cherry blossom tree in full bloom</p>
<p>🝒 Evergreen tree with snow on its branches</p>
<p>🍊 Tree with autumn foliage</p>20 – Forms Introduction
<form action="/submit-form" method="post" autocomple="on" target="_blank" novalidate enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<button type="submit">Submit</button>
</form>- form element is used to create a form that users can fill and submit
- a form element can have input, label, button elements and more
- action attribute specifies the URL that the form data will be send to
- To submit the form data the user has to click on the button
- target attribute specifies where to display the response after submission.
- like anchor element available options are:
- _blank | _self | _parent | _top | frameName
- autocomplete attribute enables/disables the autocomplete feature
- novalidate attribute disables form validation
- enctype attribute specifies the way the data will be encoded
- application/x-www-form-urlencoded (default) | multipart/form-data (for uploading files) | text/plain (no encoding at all)
- It must be used only with method=”post”
- The method attribute specifies the HTTP method will be used to submit the form data
- Available options for method GET | POST
- GET sends the data as URL variables, query string
- POST send the data as part of the request message itself.
- POST can send larger amount of data than GET
- POST is often used for sending data or uploading file
- label elements show a text
- It can also be read out loud by screen readers
- label’s for attribute associates label with an input element
- You use as for value the input’s element id
- input element is the most commonly used element in forms
- You can create text fields, checkboxes, radio buttons and more by modifying the type attribute
- At the examples one input is for normal text, and the second for email
- button element is used to create a clickable button with various purposes
- In this form is used to submit the form
- type attribute specifies the button’s behaviour
- available values are submit: | reset | button
21 – input and textarea elements
<form method="post">
<input type="hidden" name="id" value="1">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placehodler="Your name" required>
<label for="password">Password:</label>
<input type="password" id="password" name="name">
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="19">
<label for="datetime">Date and Time:</label>
<input type="datetime-local" id="datetime" name="datetime">
<label for="time">time:</label>
<input type="time" id="time" name="time">
<label for="range">Range:</label>
<input type="range" id="range" name="range"
min = "0"
max = "10"
step "1"
value = "9" >
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="url">url:</label>
<input type="url" id="url" name="url">
<label for="userInput">Enter your message:</label>
<textarea id="userInput" name="userInput" rows="4" cols="50"></textarea>
<input type="checkbox" id="option1" name="exampleCheckboxGroup">
<label for="option1">Option 1</label>
<input type="checkbox" id="option2" name="exampleCheckboxGroup">
<label for="option2">Option 2</label>
<input type="checkbox" id="option3" name="exampleCheckboxGroup">
<label for="option3">Option 3</label>
<input type="radio" id="option1" name="shippingMethod">
<label for="option1">Next-day delivery (extra fee)</label>
<input type="radio" id="option2" name="shippingMethod">
<label for="option2">Standard delivery</label>
<input type="radio" id="option3" name="shippingMethod">
<label for="option3">Pick up in store</label>
</form> - input element is a powerful element for collecting user input
- It can be used in many ways to meet our needs
- type attribute specifies the type of input
- name attribute specifies the name of the input so it can be referenced by JavaScript
- value attribute sets the default value
- placeholder attribute provides a hint to the users
- required attribute indicates that input element must not be empty
- type text shows a single line text input that accepts letters and numbers
- type password shows a single line text input that hides the characters as they are typed
- type number shows a numeric input fields
- type date shows an input field that displays a calendar so the user can select a date
- type time shows an input field that the user enter a time
- type datetime-local shows an input field with date and time
- type range shows an input field that you can set restrictions with min, max and step attributes
- type email shows an input field that accepts email and checks if it is valid
- type url show an input field that accepts a URL and checks if it is valid
- shows a multi line input
- rows and cols attributes specify the size of the element
- type checkbox shows a checkbox that allows the user to select/toggle an option
- It is usually accompanied by some text or icon
- radio buttons are another type that allows users to select an available option
- if the name attributes are the same the the user can choose only one
– in other words name attribute in radio buttons specifies if they are at the same radio button group
22 – select, option, optgroup, legend,fieldset, output elements
<form action="/submit_form" method="post">
<legend>Personal Information</legend>
<fieldset>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<legend>Fruits and Vegetables</legend>
<fieldset>
<select name="fruits" id="fruits" size="2" autofocus>
<optgroup label="Fruits">
<option value="fruit1">Apple</option>
<option value="fruit2" selected>Banana</option>
</optgroup>
<optgroup label="Vegetables">
<option value="veggie1" disabled>Carrot</option>
<option value="veggie2">Broccoli</option>
</optgroup>
</select>
</fieldset>
<output id="result"></output>
<button type="submit">Submit</button>
</form>- select element creates a drop-down list
- The user can select one option from the list
- name attribute references the element data after the form is submitted
- id attribute is used to associate it with a label
- it can also be used to get the element from JavaScript
- size attributes specifies the number of the visible option
- autofocus attributes get automatically focus
- other attributes: disabled, form, name, required
- the list items are specified by the option elements
- option elements are placed within the select element
- value attribute specifies the value of the option element
- the inner text of the option element will be shown
- selected attribute pre-selects this option
- disabled attribute disables the option
- label attribute specifies a shorter label for the option
- optgroup element groups options in a select list
- label attribute specifies the name of the group
- legend element adds a caption/title to a section of a form
- It is usually used above a fieldset element
- fieldset element groups related form controls.
- It is usually used with a legend element to add a title
- It can contain various form controls
- output element displays the result of an operation/calculation on form controls
- It is usually used after the form controls that is related to
23 – video, audio and source elements
<video controls autoplay width="400" height="300" muted loop>
<source src="Linux CLI 6 - make directory, copy, move, rename, delete files and directories" type="video/mp4">
<source src="Linux CLI 6 - make directory, copy, move, rename, delete files and directories" type="video/webm">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="path/to/audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>video elements is used to embed multimedia content
It allows video playback on a server or local storage
youtube links won’t work
controls attribute shows video player’s buttons
autoplay attribute starts the video on load
muted attribute mutes the audio of the video
loop attribute enables the loop function
width and height specify the size of the video on the page
poster attribute specifies a URL for the video’s thumbnail
source element is used within video and audio elements
it specifies the media file for the browser to play
src attribute specifies the video URL
type attribute specifies the video type
supported video types are OGG, MP4 and WebM
You can add additional source elements to support different media formats and resolutions
source element can be used within picture element
Then you can use sizes and srcset attributes
audio element is used to embed audio content
source element is used to specify the audio source
using multiple source elements you specify alternative sources/formats for the audio
controls attributes shows the audio controls
type attribute in source supports mp3, wav and ogg formats for audio
audio control also has the same attributes like video element
autoplay, muted and loop
24 – embed and object elements
<embed src="https://www.youtube.com/watch?v=GqlHhUm5vnc" width="640" height="360" title="Linux CLI" type="video/mp4">embed element embeds an external resource, video/audio file
it does not work with youtube
it also embeds local video and audio files
src attribute specifies the URL of the resource
width and height attributes specify width and height
title attribute describes the content
type attribute specifies the type of the resource
No support for fallback content
<object type="video/mp4" data="https://www.youtube.com/watch?v=GqlHhUm5vnc" width="450" height="300">
Not supported. Direct link a href="https://www.youtube.com/watch?v=GqlHhUm5vnc">Here</a>
</object>object element embeds an external resource like embed element
It also supports PDF, image files even an HTML document
type specifies the resource type
data specifies the URL of the resource
width and height specify the width and the height
inner HTML is the fallback content in case object element is not supported
other attributes: name and form
25 – svg, circle, polygon and rect
<img src = "1.svg"/>
<svg width="200" height="100" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"
fill="lime" stroke="purple" stroke-width="5" />
</svg>
<svg width="200" height="200">
<style>
.star { fill: purple; stroke: green; stroke-width: 2; }
.star:hover { fill: orange; }
</style>
<polygon class="star" points="100,10 40,180 190,60 10,60 160,180" />
</svg>
<svg width="200" height="100">
<rect width="150" height="75" x="25" y="12.5" />
</svg>svg element is used to create vector graphics
you can also add an svg file with img element
width and height specify the dimension
viewBox specify the coordinate system and the aspect ratio
svg element can take inside the following elements
rect, circle, ellipse, line, polyline, polygon, path
you can use styling with CSS
common attributes are fill, stroke, stroke-width
SVGs are scalable without quality loss
smaller size for simple graphics
can be animated and interactive, support onclick event
can be manipulated with JavaScript
circle is an SVG element, used inside svg element
creates circular shapes
cx, cy attributes are the x,y coordinates of the circle
r attribute is the radius
polygon is an SVG element too
creates shapes with multiple sides, three or more
points attribute is a list of x,y coordinate pairs that specify the polygon’s vertices
style elements specifies the style for the polygon with class star
rect is an SVG element
creates rectangles and squares
width and height attributes specify the height and the width
x,y attributes define the top-left corner of the shape
26 – ellipse, line, path and polyline
<svg width="300" height="200">
<ellipse cx="150" cy="100" rx="80" ry="50"
fill="yellow"
stroke="blue"
stroke-width="3" />
</svg>ellipse is another svg element that is used inside svg HTML element
it creates elliptical shapes, including circles
cx, cy attributes define the x,y coordinates for it’s centre
rx, rx attributes define the radius
<svg width="200" height="200">
<line x1="20" y1="20" x2="180" y2="180"
stroke="blue"
stroke-width="2" />
</svg>line is svg element that is used inside an svg HTML element
It creates a simple straight line
x1,y1 are the coordinates of the line’s start point
x2,y2 are the coordinates of the line’s end point
<svg width="200" height="200">
<path d="M 10 10 L 90 90" />
</svg>path is svg element. It must be used inside an svg HTML element
It creates a shape
d attribute defines the path to be drawn. It contains a series of commands
M 10 10 → move to 10 10
L 90 90 → line to 90 90
Other path commands: H → horizontal line to, A → Elliptical Arc
V → vertical line to, C → Cubic Bezier Curve, S → smooth Cubic Bezier Curve
Q → Quadratic Bezier curve, T → Smooth Quadratic Bezier Curve, Z → close path
<svg width="200" height="100">
<polyline points="0,100 50,25 50,75 100,0"
fill="red"
stroke="blue"
stroke-width="2" />
</svg>polyline is an svg element and must be used inside an svg HTML element
It creates a series of connected straight lines
points attribute is a list of x,y pair coordinates
fill specifies the inside color of the shape
stroke specifies the line’s color
stroke-width specifies the width of the line
27 – canvas element
<canvas id="thecanvas" width="400" height="200"></canvas>
<script>
const cnv = document.getElementById('thecanvas');
const ctx = cnv.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 40);
</script>canvas element is used to draw graphics
You can do that by using JavaScript
You can create animations, games, data visualizations etc
canvas defines the drawing area and it requires a closing tag
width and height set the width and the height of the canvas
id is used to reference it in JavaScript
It is transparent and with no border
28 – Mathematical Markup Language
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mrow>
<mi>x</mi>
<mo>=</mo>
<mfrac>
<mrow>
<mo>-</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>-</mo>
<mn>4</mn>
<mi>a</mi>
<mi>c</mi>
</msqrt>
</mrow>
<mrow>
<mn>2</mn>
<mi>a</mi>
</mrow>
</mfrac>
</mrow>
</math>Mathematical Markup Language is an XML based markup language
It is used to describe mathematical notations
It is designed to integrate mathematical formulas into a web site
It can be directly embedded in HTML5
Modern browser support MathML
MathML can also be interpreted by screen readers.
math → is the root element for MathML
mrow → specifies a horizontal line of elements, it groups the entire equation
mi → math identifier, and is used for variables
mo → math operator, and is used for operators like =, – etc
mfrac → a fraction. It has two child elements, numerator and denominator specified by mrow
msqrt → a square root
msup → a superscript, like exponents which has two children the base and the superscript
mn → math number, numerical literals
other elements → msub, mtable, mtr, mtd
29 – microdata
<div itemscope itemtype="https://schema.org/Person">
<span itemprop="name">Kronos</span>
<span itemprop="jobTitle">Fullstack Developer</span>
<a href="mailto:johndoe@example.com" itemprop="email">something@example.com</a>
</div>microdata is a way to add structured data to HTML documents
It helps search engines to understand the content of the page
It also improves search engine results and enables rich snippets in the results
It provides better accessibility for screenreaders
microdata uses attributes added to HTML elements that provide additional semantic information
it defines a vocabulary of name-value pairs
schema.org is the most widely used for microdata
it has a big collection that developers can use
key attributes → itemscope, itemtype, itemprop
itemscope → creates a new item, indicating that the encolsed HTML block contains information about a single item
itemtype → specifies that the item is being described is a Person.
the url points to the definition of the Person type
itemprop → indicates that the content is the property name of the Person item
other types: Article, Book, Movie, Photograph, Recipe
Review, WebPage, Organization, LocalBusiness, Store
Restaurant,Hotel, Place and many more
30 – Cheatsheet
Basic Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<style>
/* CSS styles */
</style>
</head>
<body>
<!-- Content goes here -->
</body>
</html>Headings
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>Paragraphs and Text Formatting
<p>This is a <strong>bold</strong> paragraph.</p>
<p>This is an <em>italic</em> paragraph.</p>
<p>This is a <u>underlined</u> paragraph.</p>
<p>This is a <mark>highlighted</mark> paragraph.</p>
<p>This is a <ins>inserted</ins> paragraph.</p>
<p>This is a <del>deleted</del> paragraph.</p>Links
<a href="https://www.example.com" target="_blank">Visit Example.com</a>
<a href="mailto:info@example.com">Contact Us</a>Images
<img src="image.jpg" alt="Description of image">
<img src="image.jpg" alt="Image not found" width="300" height="200">Lists
Unordered List (Bullet Points)
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Ordered List (Numbered)
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>Description List
<dl>
<dt>Term 1</dt>
<dd>Description of term 1.</dd>
<dt>Term 2</dt>
<dd>Description of term 2.</dd>
</dl>Division and Span
<div>This is a division.</div>
<p>This is a span within a paragraph <span style="color: red;">highlighted text</span>.</p>Tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>Forms
<form action="/submit" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<textarea rows="4" cols="50" name="comment"></textarea><br><br>
<label for="gender">Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select><br><br>
<input type="submit" value="Submit">
</form>Semantic Elements (HTML5)
<header>
<h1>Website Header</h1>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
<section>
<article>
<h2>Article Heading</h2>
<p>This is an article.</p>
</article>
</section>
<aside>
<h3>Sidebar Title</h3>
<p>Some sidebar content.</p>
</aside>
<footer>
<p>Contact us: info@example.com</p>
</footer>Comments
<!-- This is a comment -->Attributes
- Class:
<div class="example"></div> - ID:
<div id="uniqueId"></div> - Style:
<p style="color: red;"></p> - Data Attributes:
<div data-info="extra information"></div>
Multimedia Elements
Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Iframes
<iframe src="https://www.example.com" width="500" height="300"></iframe>Buttons
<button type="button">Click Me!</button>
<input type="button" value="Submit">Horizontal Rule
<hr>Preformatted Text
<pre>
This is a preformatted text.
It preserves both spaces and line breaks.
</pre>Blockquote
<blockquote cite="https://www.example.com/source">
"The only way to do great work is to love what you do." - Steve Jobs
</blockquote>Citation
<p>According to <cite>The World Factbook</cite>, there are over 7 billion people in the world.</p>Code and Inline Code
<p>This is a code element: <code>print("Hello, World!")</code>.</p>
<pre><code class="language-python">
def hello():
print("Hello, World!")
hello()
</code></pre>Marked Text
<p>He was <mark>very</mark> interested in the project.</p>Small Text
<p>This is a normal text. This is <small>smaller text.</small>.</p>Subscript and Superscript
<p>Water: H<sub>2</sub>O</p>
<p>The equation: E = mc<sup>2</sup></p>Details and Summary
<details>
<summary>Click to expand</summary>
<p>This is some detailed information.</p>
</details>Meter Element
<meter value="0.6" min="0" max="1">60%</meter>Progress Element
<progress value="70" max="100">70%</progress>Time Element
<p>The event starts at <time datetime="2023-09-15T14:00">2 PM</time>.</p>