Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mosespace/website-motivation

This repository drives in to a development of a Website in Html and css
https://github.com/mosespace/website-motivation

beginner class development dom first-issue html html-beginners html-class-css-html javascript reactjs vscode web

Last synced: 18 days ago
JSON representation

This repository drives in to a development of a Website in Html and css

Awesome Lists containing this project

README 

        
# Html Website Tutorial

## What Is HTML?



The HyperText Markup Language (HTML) is the most fundamental building block of the web. It defines the structure and content of every web page. It is the common language for all websites and browsers, which is why you can use your browser to visit any website, and your browser just knows what to do. An HTML document is a file with extension .html.



Generally speaking, other technologies are used alongside. The Cascading Style Sheet (CSS), for example, can be used to describe the page’s appearance, and JavaScript can define the web page’s behavior and make it more interactive for the user. We will talk about these technologies in detail in future articles.



Before proceeding with this article, make sure you have a code editor and a browser installed on your computer.



Here is an example of an HTML file:



```js



1.  

2.  



3.  

4.    

5.    My HTML page

6.  

7.  

8.  

9.    
This is a heading


10.    
This is a paragraph.


11. 

12. 

13. 



```



Elements are the basic components of this HTML file. An HTML element is usually defined by a start tag and an end tag, and with some content in between like this:



```js



1.  

2.    
This is a Heading


3.    
This is a paragraph.



4.    


5.      
This is also a paragraph.


6.    


7.  



```



    




The `` has three elements inside, a heading `
`, a paragraph `
`, and a `
`. And the `
` element has another paragraph `
` inside. The plot above is what the structure tree looks like. There is no limit on how long or complex this tree could be. This is related to a fundamental concept in frontend development called the Document Object Model (DOM). With the DOM, we can find and change any element in an HTML file.



Another important note is that you should never escape the end tag (if it needs one). Sometimes the elements will display correctly, but you should never rely on that. It can cause unexpected consequences.



Usually, each HTML element is assigned multiple attributes. They provide additional information to the HTML elements. They are always specified in the start tag, and they usually come in name/value pairs like this:



``bash

1.  An Example` to `


`. `
` is the most important heading, and it should summarize your entire page content, which is why there should only be one `
` heading in the HTML file



```js



    

1.    
Heading level 1


2.    
Heading level 2


3.    
Heading level 3


4.    
Heading level 4


5.    
Heading level 5


6.    
Heading level 6



```



The output should look like this:









    




Paragraphs on the other hand, are defined with the `
` tag



```js



1.  


This is a paragraph.


2.  
This is also a paragraph.



```



In HTML, you cannot change how the paragraphs are displayed in the browser by adding extra spaces or extra lines in the code. They will be automatically removed by the browser. For instance, the following two paragraphs will produce the same resul



```js



1.  

2.  
This is a paragraph.


3.  

4.  
This           is a 

5.  paragraph.



```

However, what if we do want a line break? The answer is simple, we use a `
` element:



```js

1.    
This is a `
` paragraph.


```

The output will be:



# Formatting elements

The formatting elements are a special collection of elements that give texts special meaning and appearance.

-    `` - Bold text

-    `` - Important text

-    `` - Italic text

-    `` - Emphasized text

-    `` - Marked text

-    `` - Smaller text

-    `` - Deleted text

-    `` - Inserted text

-    `` - Subscript text

-    ``- Superscript text



```js



1.  
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum volutpat pretium turpis, sodales facilisis metus

2.       porta a. Morbi condimentum porta massa, eu mattis turpis cursus sit amet. cursus ut tellus a convallis. In nec

3.       nisl nisl. Mauris a ligula et ligula malesuada luctus. Fusce placerat id tortor at tristique. Quisque non vulputate

4.       eros. Pellentesque malesuada interdum ligula, et dignissim arcu vestibulum tincidunt.


5.

6.  
Aliquam imperdiet volutpat lorem, in viverra lorem ultricies sed. Integer bibendum velit sit amet hendrerit

7.       venenatis. Suspendisse interdum ornare molestie. Nulla porttitor venenatis purus eu sollicitudin. In quis aliquet

8.       ipsum. Curabitur eu feugiat sem. Etiam rhoncus lectus eget dolor cursus, a viverra tellus faucibus. Nam aliquam

9.       rhoncus urna. Vivamus pulvinar eleifend nibh quis semper. Sed finibus neque in sollicitudin cursus. Curabitur ut ex

10.      egestas, suscipit lectus a, auctor ante.



```



The output should look like this:



    




## Links

Links are found on nearly all web pages. They allow users to travel from page to page. When you click on a link, it takes you to another HTML file, and this simple action forms the foundation of the internet. The links are defined as follows:



```js

1.  link textlink text



```