2021-06-29 12:30:52 +00:00
<!DOCTYPE html>
< html lang = en >
< head >
2021-10-10 21:31:21 +00:00
< title > Make a Simple Webpage – diyhosting.bhh.sh< / title >
2021-10-10 21:55:08 +00:00
<!-- # include file=".nav.html" -->
2021-06-29 12:30:52 +00:00
< / head >
< body >
< header > < h1 > Make a Simple Webpage< / h1 > < / header >
< nav > < / nav >
< main >
< p >
We now have a webpage that's actually on the real-live internet!
You've already made it!
Now the only issue is putting what you want on your website.
< / p >
< p >
In this little series, we'll overview the basics of HTML and CSS,
the two important languages that will allow you to make a stylish multi-page website.
We will start with HTML.
< / p >
< h2 > HTML< / h2 >
< p >
HTML is the < strong > h< / strong > yper< strong > t< / strong > ext < strong > m< / strong > arkup < strong > l< / strong > anguage.
It is the "language" that all webpages are written in so that all browsers can read and display them properly.
< / p >
< p >
2021-07-05 13:33:36 +00:00
A < dfn > markup language< / dfn > is < em > not< / em > the same as a programming language:
2021-06-29 12:30:52 +00:00
Programming languages specify orders for a computer, while markup languages are ways of specifying the styling of text.
Markup languages are necessary because computers run on mere text, not colors, sizes, headers and other styling things.
< / p >
< p >
Let's understand what HTML is.
In < a href = "nginx.html" > a previous article< / a > , we put this text in your website's < code > index.html< / code > .
< / p >
< h3 > Paragraphs< / h3 >
< p >
Note how this HTML file appears as a webpage:
< / p >
2021-06-29 13:50:40 +00:00
< table class = cnp >
2021-06-29 12:30:52 +00:00
< tr >
< td >
< pre > < code > < !DOCTYPE html>
< h1> My website!< /h1>
< p> This is my website. Thanks for stopping by!< /p>
< p> Now my website is live!< /p> < / code > < / pre >
< / td >
< td >
< img src = pix/nginx-website.png alt = "The webpage as it appears." >
< / td >
< / tr >
< / table >
< p >
The content between the < code > < p> < / code > and < code > < /p> < / code > tag(s) is formatted as different paragraphs.
If you don't use these < code > < p> < / code > tags, the text will not be formatted as separate paragraphs even if you write it as
multiple lines.
Observe if we add lines to the end of this file:
< / p >
2021-06-29 13:50:40 +00:00
< table class = cnp >
2021-06-29 12:30:52 +00:00
< tr >
< td >
< pre > < code > < !DOCTYPE html>
< h1> My website!< /h1>
< p> This is my website. Thanks for stopping by!< /p>
< p> Now my website is live!< /p>
Here is some more text.
There are no paragraph tags on this stuff.
So it will all appear as one paragraph.
Despite being on multiple lines.
Even this!< / code > < / pre >
< / td >
< td >
< img src = pix/html-01.png alt = "On p tags" >
< / td >
< / tr >
< / table >
< p >
This will seem strange at first, but this is the use of HTML as a markup
language: it allows you to style your document with tags and write it in whatever way is convenient.
< / p >
< p >
Let's learn more about what HTML can do.
< / p >
< h3 > Headings< / h3 >
< p >
In addition to paragraphs (< code > < p> < / code > ), we can specify headings with inside < code > < h1> < /h1> < / code > tags.
Heading tags are for your page's title and section headings in the document:
< / p >
< ul >
< li > < code > < h< strong > 1< / strong > > < /h< strong > 1< / strong > > < / code > – Main and largest headings< / li >
< li > < code > < h< strong > 2< / strong > > < /h< strong > 2< / strong > > < / code > – Subheadings (smaller)< / li >
< li > < code > < h< strong > 3< / strong > > < /h< strong > 3< / strong > > < / code > – Sub-subheadings (yet smaller)< / li >
< li > < code > < h< strong > 4< / strong > > < /h< strong > 4< / strong > > < / code > – Etc., etc.< / li >
< / ul >
2021-06-29 13:50:40 +00:00
< table class = cnp >
2021-06-29 12:30:52 +00:00
< tr >
< td >
< pre > < code > < h1> This is a top-level heading.< /h1>
< p> Here is some paragraph text.< /p>
< p> And here is some more...< /p>
< h2> This is a subheading (h2)< /h2>
< p> And another paragraph.< /p>
< h2> And here is another subheading (Also an h2)< /h2>
< p> Etc. etc...< /p> < / code > < / pre >
< / td >
< td >
< img src = pix/html-02.png alt = "On p and h# tags" >
< / td >
< / tr >
< / table >
< h4 > A preview to CSS< / h4 >
< p >
2021-07-05 13:33:36 +00:00
It is very important to use headings like this for your pages.
2021-06-29 12:30:52 +00:00
Notice that on this website, headings come in different colors, text-alignment and sizes for emphasis.
If we use these heading tags, when we clear CSS, we can easily style all < code > < h2> < / code > , for example,
to be the size and color and alignment we want.
< / p >
2021-06-29 13:50:40 +00:00
< h2 > Text formatting< / h2 >
2021-06-29 12:30:52 +00:00
2021-06-29 13:50:40 +00:00
< p >
HTML can also be used to do text formatting.
We can make bold, italic, underlined or struck through text with more HTML tags:
< / p >
2021-06-29 12:30:52 +00:00
2021-06-29 13:50:40 +00:00
< table class = cnp >
< tr >
< td >
< pre > < code > < p> This is < b> bold text< /b> .< /p>
2021-06-29 12:30:52 +00:00
2021-06-29 13:50:40 +00:00
< p> This is < i> italic text< /i> .< /p>
2021-06-29 12:30:52 +00:00
2021-06-29 13:50:40 +00:00
< p> This is < u> underlined< /u> .< /p>
2021-06-29 12:30:52 +00:00
2021-06-29 13:50:40 +00:00
< p> This is < s> struck through< /s> .< /p> < / code > < / pre >
< / td >
< td >
< img src = "pix/html2-01.png" alt = "formatted text" >
< / td >
< / tr >
< / table >
2021-06-29 12:30:52 +00:00
2021-06-29 13:50:40 +00:00
< h2 > Semantic Tags< / h2 >
2021-06-29 12:30:52 +00:00
< p >
2021-06-29 13:50:40 +00:00
While < code > < b> < /b> < / code > and < code > < i> < /i> < / code >
do exist, it's actually better < em > not< / em > to use them directly in text.
2021-06-29 12:30:52 +00:00
< / p >
< p >
2021-06-29 13:50:40 +00:00
Try using < code > < strong> < /strong> < / code > instead of < code > < b> < /b> < / code > and < code > < em> < /em> < / code > instead of < code > < i> < /i> < / code > .
By default, they will look exactly the same.
You complain that they require more key presses, but it's thought to be a very bad idea to modify lower-level tags with CSS directly.
2021-06-29 12:30:52 +00:00
< / p >
< p >
2021-06-29 13:50:40 +00:00
Note that some bold words on this site have < strong > different color for emphasis< / strong > .
This is a setting set via CSS for all < code > < strong> < / code > tags.
It would not be a good idea for us to use this for < code > < b> < / code > , since there might be a non-colored situation we want to occasionally use it in.
2021-06-29 12:30:52 +00:00
< / p >
2021-06-29 13:50:40 +00:00
< span class = next > < a href = "html2.html" > Next: Images and Links in HTML< / a > < / span >
2021-06-29 12:30:52 +00:00
< / main >
2021-10-10 21:31:21 +00:00
<!-- # include file=".footer.html" -->
2021-06-29 12:30:52 +00:00
< / body >
< / html >