diff --git a/images/text-formating.png b/images/text-formating.png new file mode 100644 index 0000000..dd87fe6 Binary files /dev/null and b/images/text-formating.png differ diff --git a/readme.md b/readme.md index d5fcb04..1693843 100644 --- a/readme.md +++ b/readme.md @@ -18,15 +18,17 @@ - [Browser](#browser) - [Code Editor](#code-editor) - [How to use Visual Studio Code](#how-to-use-visual-studio-code) -- [Introductin to HTML](#introductin-to-html) - - [History of HTML](#history-of-html) - - [What is HTML?](#what-is-html) + - [Introductin to HTML](#introductin-to-html) + - [History of HTML](#history-of-html) + - [What is HTML?](#what-is-html) - [HTML Element](#html-element) - [Attribute](#attribute) - [HTML Comment](#html-comment) - [Exercise](#exercise) - [Day 3](#day-3) - [DOM](#dom) + - [Declaration](#declaration) + - [Root Element](#root-element) - [Heading Elements](#heading-elements) - [Paragraph Element](#paragraph-element) - [Section Element](#section-element) @@ -37,10 +39,22 @@ - [Exercise](#exercise-1) - [Day 4](#day-4) - [Blocking and Non-blocking Elements](#blocking-and-non-blocking-elements) + - [Exercises](#exercises-1) - [Day 5](#day-5) + - [HTML5 Formatting Elements](#html5-formatting-elements) + - [Exercises](#exercises-2) +- [Day 6](#day-6) - [HTML5 Semantic Elements](#html5-semantic-elements) -- [Day 5](#day-5-1) - - [HTML5 Semantic Elements](#html5-semantic-elements-1) +- [Day 7](#day-7) + - [HTML Form](#html-form) +- [Day 8](#day-8) + - [Meta tags](#meta-tags) +- [Day 9](#day-9) + - [HTML Table](#html-table) +- [Day 10](#day-10) + - [Lists](#lists) +- [Day 11](#day-11) + - [File Paths](#file-paths) | # Day | Topics | | ----- | :----------------------------: | @@ -235,13 +249,13 @@ I will use Visual studio code and I will use it in this challenge too. I strongl ### How to use Visual Studio Code -# Introductin to HTML +## Introductin to HTML -## History of HTML +### History of HTML The initial release of HTML was 1993. The first version of HTML was written by Tim Berners-Lee in 1993. HTML has been evolving for the last three decades and the now the latest version is HTML5. -## What is HTML? +### What is HTML? The word HTML is an acronym. That is stands for Hypertext Markup Language. It is the standard markup languages to develop websites. HTML is the build block of the web that allows building layouts of page using HTML elements. HTML is not not a programming language instead it is a markup language. @@ -366,16 +380,42 @@ Comment in any programming language help a code to be more readable. Therefore, ## DOM -In this section, we will start writing the DOM tree of an HTML document or file. DOM stands for Document Object Model. The DOM is structure like a true. It starts with an _html_ root element followed by head and body. The head and the body are the immediate children of the root element, _html_. -Create folder on the desktop and give it any name and even you may call it (30DaysOfHTML), inside this folder create an index.html file. Every HTML file has to end with .html extension. And it is good to have at least on index.html file in the project and the reset of the file will have different names. +In this section, we will start writing the DOM tree of an HTML document or file. DOM stands for Document Object Model. The DOM is structure like a true. It starts with an _html_ root element followed by head and body. The head and the body are the immediate children of the root element, _html_. Before the root element, there is a declaration. + +### Declaration Before the root element, there is a declaration. This declaration tells the browser that the document is an HTML. Therefore, the browser render it to the way an HTML suppose to be rendered. -This is the code to declare an HTML. +This is the code to declare an HTML. The declaration is not part of the DOM tree. ```html ``` +### Root Element + +The _html_ element is the root of the DOM tree and is the parent of _head_ and _body_. + +The DOM try has be wrapped by the html tag. + +```html + + +``` + +The _html_ tag with two children, head and body. + +```html + + + + + content goes here + + +``` + +Create folder on the desktop and give it any name and even you may call it (30DaysOfHTML), inside this folder create an index.html file. Every HTML file has to end with a .html extension. And it is good to have at least on index.html file in the a project and the reset of the file will have different names. + This a simplistic DOM structure that contains _html_, _head_, _title_, _body_, _h1_ elements. ```html @@ -728,14 +768,161 @@ Make a DOM tree of the following HTML code ``` + # Day 4 ## Blocking and Non-blocking Elements -# Day 5 +HTML elements are like a box. Some elements take the whole width of the view port while some take as much space that fit only for the content. In another way, some elements do not allow other elements to come next them both in the left and right side, however, some elements allow other elements to come next to them. -## HTML5 Semantic Elements +- Blocking elements take the whole width of the viewport. +- Non-blocking element only take a space that is enough for the content. + +List of blocking elements: + +```sh +
+
+