This is lesson two in the series HTML web development with android.
In the introductory chapter, we opened you up to what you'll be needing for this course, we also showed you how to use your browser and text editor interchangeably for your web project.
And for us, that is the most important, as it would play a basic upon which this course and some of our other web development courses with android would rely on.
So if you haven't gone through it, make out time to go read it before actually proceeding. follow the link to the Introductory chapter .
We also opened you up to some HTML basics in the last chapter and for this chapter I'll proceed with bringing much of HTML basics.
Let's get started already.
<!DOCTYPE html>
<html>
<head>
<title>Html Simple Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
This is the simple document we considered in the last example, now take note of this few things;
- All HTML document must start with the doctype declaration. <!DOCTYPE html>
- The HTML document itself begins with HTML opening tag and ends with the HTML closing tag.
If you fail to start an HTML document with the doctype declaration, you may not necessarily have errors, some browsers will revert to quirk mode for rendering.
By quirk mode these web browsers would technically try to maintain backward compatibility with web pages that do not strictly comply to W3C and IETF standard.
So, how about browsers that don't have the ability to revert to quirk mode, what happens? Your guesses is as right as mine; You have errors. So don't make this mistake, always start your HTML document with the doctype declaration. So also;
<!DOCTYPE html>
<html>
<head>
<title>Html Simple Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
Let's get back to our example. So after the doctype declaration is the HTML opening tag, once we're done with the head and body section, we end the document with the HTML closing tag.
Now, why I kind of bring this example up more often is that, I want you to get used to it. It's a template to every HTML document.
So again, All HTML document must start with the doctype declaration. And the HTML document itself begins with the HTML opening tag and ends with the HTML closing tag.
Take notes if you have to.
Now we move onto HTML headings.
HTML HEADINGS
HTML headings are defined with the h1 to h6 tag, h1 being the most important and h6 being the least important.
Now, in no way do HTML headings have anything to do with the head tag.
The head element is a container for metadata as I said earlier, and in a while we will be looking into it.
Okay, so back to HTML headings.
I did said that they are defined with the h1 to h6 tags. Let's see how they work.
I want you to join me in this exercise
I'll create an HTML template and in the body section. I'll create an h1 tag and write; This is heading 1, close the tag. Do so for h2 tag up to h6, and once I'm done, I'll save and preview it in a browser.
<!DOCTYPE html>
<html>
<head>
<title>Html Heading</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
You see bold text with different sizes, biggest for h1 and smallest for h6.
So the headings element is used once we want to write a heading or title to a document or an article.
Now lets look at this simple writeup on how to make homemade spaghetti sauce, the largest text you see here is the h1 heading.
So you see, HTML heading element are used to head or title a document or an article.
Do not use the heading element or tags to make text bold or bigger, I intend to show you how to do that in the next chapter, HTML formatting.
Also users skim your pages by its heading, so always try to use the heading tag, now apart from that, search engines also uses headings to index the structure and content of your web pages.
If you don't understand that, look at this; From this you'll see that Google renders the title or head of your document to satisfy a particular search.
Headings are important, make them important.
Up next is; HTML paragraph.
HTML PARAGRAPH
Now just like the paragraph we use in English, we know it to be a passage in the text that is about a different subject from the preceding text, marked by commencing on a new line, we can say same for HTML.
HTML paragraphs are defined with the P tag.
So once you want to declare a new paragraph in a document, you use the p tag.
As an example, I'll create a paragraph tag and write, this is a paragraph. Create another paragraph tag and write, this is another paragraph.
<!DOCTYPE html>
<html>
<head>
<title>Html paragraph</title>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
So when we preview it, you see that the two paragraph text are separated, as a new paragraph should start in a new line.
HTML LINKS
HTML link are defined with the "a" tag. Now, this "a" tag always comes with the href attribute.
Attributes add additional information to HTML elements, so in this case, (The href attribute provide address information for a link).
We will see how it works in a moment, but for now, bring your mind back.
Now, have you ever clicked on a text or an image and you're redirected to another page or the same page, either the top or bottom of the page?
Well, If you have, what you clicked on was a link.
Let's see how it works.
So I'll create document 1, add some quotes, resource text and author, save it with just anything maybe doc1.
<!DOCTYPE html>
<html>
<head>
<title>Document 1</title>
</head>
<body>
<h1>Extreme Programming Explained: Embrace Change</h1>
<address>By Kent Beck</address>
<blockquote>Responsibility cannot be assigned; it can only be accepted. If someone tries to give you responsibility, only you can decide if you are responsible or if you aren't.</blockquote>
<br>
<h1> Clean Code: A Handbook of Agile Software Craftsmanship</h1>
<address>By Robert C. Mart</address>
<blockquote>The ratio of time spent reading (code) versus writing is well over 10 to 1 ... (therefore) making it easy to read make it easier to write.</blockquote>
</body>
</html>
Then, I'll switch tabs and create another document (link.html), but in here I'll create a link that takes me to the first page on click, using the "a" tag.
<!DOCTYPE html>
<html>
<head>
<title>Linking Back To Doc1</title>
</head>
<body>
<a href="/storage/0000-0000/doc1.html">LINK BACK TO FIRST PAGE</a>
</body>
</html>
So Let's create the "a" tag and in the href attribute we type in the location of our first page (this had been covered in the previous chapter) and we can name it; "link back to first page", close our a tag and then preview.
So once you click on the link, it should take you back to the first page.
There's much on links, we've created a chapter dedicated for it, but for basics, understand this for now.
So we progress.
HTML IMAGE
HTML image is defined with the <img> tag.
It is an empty elements (by empty element I mean that they do not have contents inside of them but instead, attributes ("src") are used to link them out to a resource file (image directory path).
Empty elements do not have closing tags but are instead closed in a different manner i.e by adding a forward slash(/) just before the greater than angle bracket of the opening tag)
It also comes with attribute and as I said earlier, attributes are used to add additional informations to an HTML element.
The source file (src), alternative text (alt), width, and height are provided as attributes.
Checkout this example;
<!DOCTYPE html>
<html>
<head>
<title>Html Image</title>
</head>
<body>
<img src="/storage/0000-0000/DCIM/logo maker/Knowaloud.png" alt="Knowaloud cover" width="480px" height="480px">
</body>
</html>
Now, the source file (src) is the link to the image, that is the directory of the image as you see in this case.
The alternative text (alt) is the text that displays, if the browser cannot load the image or the image is not found.
And also the width and height attribute specifies the width and height for the image.
Now a bit of an advice, Don't just assume you understand these things, try them out, experiment on the different things you've learnt so far, where you have problems, drop them in the comment section and we'll come to your rescue.
Before we end this chapter, we have a small assignment for you.
Chapter 1 Exercise
Create a simple HTML document with the title "my first web page".
Write your name, email and country in three different paragraphs.
Also add your image and title it my profile.
Now create another document, add a link, call it profile, that link should take you to the first page on click.
While trying that out, if you encounter any problems, if rereading doesn't help, leave a comment, so we know how to help you..
If you have questions, suggestions and particular interest, comment in the comment box below and we'll be glad to reply.
Share this, if you find it educating, we'll meet in the next chapter.
No comments:
Post a Comment