@ -248,6 +250,7 @@ As web developer, you should write code using a text or code editor. Therefore,
I will use Visual studio code and I will use it in this challenge too. I strongly suggest to use Visual Studio Code because it has lots of productivity extensions that makes super productive. Now, let's [download](https://code.visualstudio.com/) visual studio code.
### How to use Visual Studio Code
To know how to use visual studio code, watch the following [video](https://www.youtube.com/watch?v=vSyq1ENoovI)
## Introductin to HTML
@ -786,74 +789,208 @@ HTML elements are like a box. Some elements take the whole width of the view por
List of blocking elements:
```sh
<address></address>
<article></article>
<aside></aside>
<blockquote></blockquote>
<canvas></canvas>
<dd></dd>
<div></div>
<dl></dl>
<dt></dt>
<fieldset></fieldset>
<figcaption></figcaption>
<figure></figure>
<footer></footer>
<form>
<h1></h1> to <h6></h6>
<header></header>
<hr/>
<li></li>
<main></main>
<nav><nav>
<noscript></noscript>
<ol></ol>
<p></p>
<pre></pre>
<section><section>
<table></table>
<tfoot><tfoot>
<ul><ul>
<video></video>
<address></address> - allows to write an address related information
<article></article> - allows to write articles in a section
<aside></aside> - allows to create a section that is indirectly related to the document
<blockquote></blockquote> - to create text a quoation mark
<canvas></canvas> - to create canbas
<dd></dd> - to describe a term or name in a description list
<div></div> - to create section or box
<dl></dl> - to create a description list
<dt></dt> - describes a term a description list
<fieldset></fieldset> - to create related elements in a from
<figcaption></figcaption> - define figure caption
<figure></figure> - to wrap figure, diagram, etc
<footer></footer> - to create footer of a document
<form> - to create a form
<h1></h1> to <h6></h6> - to create different size headings
<header></header> - to create header of a document
<hr/> - to create a horizontal line
<li></li> - create order or an unordered list
<main></main> - to wrap the main content of the document
<nav><nav> - to create navigation
<noscript></noscript> - describe an alternative content to be displayed to users when JS has disabled on their browsers.
<ol></ol> - to create an ordered list
<p></p> - to creat paragraph
<pre></pre> - to create a space preserved content, eg poem
<section><section> - to create section
<table></table> - to create table
<tfoot><tfoot> - to create a table footer
<ul><ul> - to wrap order or unorder list
<video></video> - to create a video content
```
Now, let's use some of the blocking elements in following snippet of code.
```html
<!DOCTYPE html>
<html>
<head>
<title>30 Days Of HTML</title>
</head>
<body>
<header>
<spanstyle="color: #e34c26">H</span>
<spanstyle="color: #264de4">T</span>
<spanstyle="color: #f0db4f">M</span>
<spanstyle="color: #61dbfb">L</span>
</header>
<main>
<section>
<h1id="first-title">The Building Blocks of the web</h1>
<article>
<p>
There is not website without HTML. Learn HTML and build websites and
To create a new line between non-blocking elements we can use the break(br) element.
@ -919,12 +1056,130 @@ Create the following text using the formatting elements.
## HTML5 Semantic Elements
Semantic elements have special meaning and describes it meaning to the browser. For instance, *<div>* and *<span>* are not semantic elements because they do not give any meaning to a browser. However, *<header>* or *<foot>* is a semantic element because it clearly describe and defines its content.
List of some semantic elements:
```bash
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
```
To know more about each semantic element, you can read this [article](https://www.freecodecamp.org/news/semantic-html5-elements/).
# Day 7
## HTML Form
## HTML Document metadata
The HTML document starts with a declaration followed by the root *<html>* tag. Inside the *<html>* tag, there is *<head>* and *<body>*. The *<head>* contains the HTML document *metadata*. Metadata contains information about the page that includes styles, scripts, and data to help software user and render the page. In this section, we will learn how to use the different metadata. Look at the table blow understand the different metadata.
asabeneh
4 years ago
