Okay guys let's start typing some HTML codes here. Question is, what to put at the very top of every page you are going to create?
Well, it's really not important how you're going to create html pages, manually or you will learn PHP, Python and create stuff dynamically like your own content management system. So whatever method you choose at the very top, there must be doctype declaration and that thing means that you are telling your browser to apply specific rendering rules to that page.
If you don't do that page can be totally messed up at the end user side.
So let's talk about different versions of doctype declaration. Go to google and type "w3c doctype declarations" and you will probably land on this link.
While scrolling note a lot of HTML variants and versions. That was mess I was mentioning in first tutorial. But now we have HTML version 5 which is great. That version will save you a lot of headaches. The bottom line, just put this at the top of every html page you will create:
<!DOCTYPE html>
After that we have html opening and closing tags. Think about them as borders around some state. All other tags plus real content will go between html tags. Don't forget arrows and slash at the start of ending html tag, like this:
<!DOCTYPE html>
<html>
</html>
Ok, between html tags we must have two important sections. Also with opening and closing tags, but this time that's head and body tag. First goes head section, and than body section.
In between head tags we will put stuff important for search engines. In between body tags we will put actual useful content for the end user that will be presented in their browsers.
First head section, and than body section, like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
So far so good. In head section we will put title tag and meta charset. Title element consist of title tags on left and right side, and content in between. That content is just thing that will be visible in the upper left corner of most browsers. It will also be used as name for the file if you decide to save it from web server on you local PC. It's just a name for web page.
Meta charset is just way to tell browsers how to render characters. If you don't have it in head section, some characters on some end devices can be presented in the weird way. Use command UTF-8 to make sure that most of the browsers will render page content nicely in many countries with different languages. For the most time you are ok with UTF-8, but they are many more charsets.
We don't have real content for the end user yet, but it's fine for now:
<!DOCTYPE html>
<html>
<head>
<title>Title of The Page</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
And now stuff for end users. Use p tags on left and right side to set borders for useful content. You can have as many p elements as you need. Bottom line, html elements consist of opening and closing tag with content in between. Closing tag goes with the slash. Sometimes tags don't need slashes, but you will learn wich one over time.
Don't try to memorize, just go with the flow. Don't forget arrows.
<!DOCTYPE html>
<html>
<head>
<title>Title of The Page</title>
<meta charset="utf-8">
</head>
<body>
<p>Web Page Content Goes Here</p>
</body>
</html>
No comments:
Post a Comment