HTML is used to write the content that you see in any website and that's how you can write it
HTML structure :---
<element name> content </element name> ...html is written in what is called tags <> and content between opening tags <> and a closed tag </> with a backslash like this not \
In part one we will learn html and some css for simple styling ,don't worry about css in this fairly long article I take a little steps about css but it's not your main concern here.
to write you code you run it right in your browser you don't need much not like android development where you need an android environment (emulator) Luckily! for you the environment is your browser .yeah the thing you are reading this on because html ,css and js run right on your browser you can actually see the html of this website on the console by pressing ctrl + shift + I or going into settings < more tools < developer tools if you are on chrome ,or any browser that is built on Chromium.
but you need an IDE(integrated development environment) to write your code in there are tones of them out there like sublimetext, brackets and visual code studio but here we will use the old school hand coded notepad
putting your first content out there
step 1: open notepad
note ' I will use an IDE later on because it has an easy looking feel and autocomplete the code but for now let's use the old way '
step 2: copy this content in your notepad.
Covid 19
what is it?
is an infectious disease caused by severe acute respiratory syndrome Common symptoms include fever, cough, fatigue, shortness of breath, and loss of smelland taste. While the majority of cases result in mild symptoms, some progress to acute respiratory distress syndrome (ARDS)
signs and symptomes
Fever is the most common symptom of COVID-19, but is highly variable in severity and presentation, with some older, immunocompromised, or critically ill people not having fever at all. In one study, only 44% of people had fever when they presented to the hospital, while 89% went on to develop fever at some point during their hospitalization.
Other common symptoms include cough,loss of appetite , fatigue, shortness of breath,sputum production , and muscle and joint pains Symptoms such as nausea, vomiting have been observed in varying percentages.
step3: call your notepad index.html and lunch it from it's icon.
aaaand it's ugly ,you would also notice that the spaces are gone between your paragraph and that your site title is index.html ,The browser ignores line breaks ,tabs and two white spaces so let's start giving it some structure by html Finally..
HTMl body structure :---
you will use this structure in every html document you type
<!DOCTYPE html> //1
<html> //2
<head> //3
<meta charset="utf-8">//4
<title>website name</title> //5
</head>
<body> //6
Page content goes here.
</body>
</html>1.the orange <!DOCTYPE html> isn't an html element it's a short cut for (document html declaration) it tells new browser that you are using HTML version 5
2.the <html></html> this is where all your html elements live ,THE entire document lives there because it contains all the elements in the document
3./.6 you will fine tag called <head> and one called <body> and the head has all the info that aren't content in the web page while body has the content
4.<meta charset ="utf-8">meta elements provide document metadata, information about the document. In this case, it specifies the character encoding (a standardized collection of letters, numbers, and symbols) used in the document as Unicode version UTF-8 (talk about that later)
5.the title element is what goes in the bar basically a replacement to the ugly index.html you see in the image
6.is the body element that will contain all your web page
after that just copy the content in the <body></body > and nothing much will happen
and that gets us to the last step
Identifying html elements:
Your job when marking up content is to choose the HTML element that provides the most meaningful description of the content at hand. For example, the most important heading at the beginning of the document should be marked up as an h1 because it is the most important heading on the page. Don’t worry about what it looks like that's CSS job
before working on the content you need to know some of html elements
1.headings
written as <h1> the heading <h1> if it's your most important first heading there is also <h2> up to <h6> from the most important heading to the least
2.paragraphs
written as <p> content </p> for paragraphs just as simple as that
time to work on the content
open your editor or notepad mark Covid 19 an <h1> covid 19 </h1> element
your page also has other headings like what is it? and signs and syptomos use h2 element for them
each h2 is followed by a paragraph use the <p> element for it
lastly I wanted to emphasize the last line use <em> and <strong> element for bold words
html code so far
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>website name</title>
</head>
<body>
<h1>Covid 19</h1>
<h2>what is it?</h2>
<p>is an infectious disease caused by severe acute respiratory syndrome Common symptoms include fever, cough, fatigue, shortness of breath, and loss of smelland taste. While the majority of cases result in mild symptoms, some progress to acute respiratory distress syndrome (ARDS) </P>
<h2>signs and symptomes </h2>
<p>Fever is the most common symptom of COVID-19, but is highly variable in severity and presentation, with some older, immunocompromised, or critically ill people not having fever at all. In one study, only 44% of people had fever when they presented to the hospital, while 89% went on to develop fever at some point during their hospitalization.
<em>Other common symptoms include cough,loss of appetite , fatigue, shortness of breath,sputum production , and muscle and joint pains Symptoms such as nausea, vomiting have been observed in varying percentages</em>.</p>
</body>
</html>
now let's add some css in the head tag
quick view on css
css syntax goes like what you want to do { stuff you want to happen ; more stuff;more stuff}
so adding a background color goes like this
<!DOCTYPE html>
<html>
<head> //adding css styling
<meta charset="utf-8">
<style>
body{ background-color: #8FBC8F;
margin: 0 10%;</style>
<title>website name</title>
</head>
<body>
<h1>Covid 19</h1>
<h2>what is it?</h2>
<p>is an infectious disease caused by severe acute respiratory syndrome Common symptoms include fever, cough, fatigue, shortness of breath, and loss of smelland taste. While the majority of cases result in mild symptoms, some progress to acute respiratory distress syndrome (ARDS) </P>
<h2>signs and symptomes </h2>
<p>Fever is the most common symptom of COVID-19, but is highly variable in severity and presentation, with some older, immunocompromised, or critically ill people not having fever at all. In one study, only 44% of people had fever when they presented to the hospital, while 89% went on to develop fever at some point during their hospitalization.
<em>Other common symptoms include cough,loss of appetite , fatigue, shortness of breath,sputum production , and muscle and joint pains Symptoms such as nausea, vomiting have been observed in varying percentages</em>.</p>
</body>
</html>
body is a css element to go through all the website body giving it a color of #8FBC8F you can also replace #8FBC8F with a normal name like red ,green and so on then we give our body a margin so it doesn't stick to the borders of our computer and that's it
now you have a website with html and some styling
some notes
you don't have to close html tags if there is a tag after it because the browser will know that it's the end of the element
here is a css website for hex colors and names https://htmlcolorcodes.com/color-names/
publish you work on codepen and show it to us if u want
next article: part2:learn html
Damn man. Your posts are too good. You can make full website?