Showing posts with label HTML. Show all posts
Saturday, December 29, 2018
HOW TO USE ARTICLE, SECTION AND ASIDE ELEMENTS
Hi, in today’s lesson I will be discussing with you some important HTML 5 elements which include: <article>, <section> and <aside> element. I don’t want to waste your time on endless preambles, so let’s get to walk.
1. THE <ARTICLE> ELEMENT
This element provides you with a large and independent section that is usually reserved for entries such as blog posts, comments and other pieces of content. If you are building a website or a blog for instance, <article> element is what you will use to create space for entry of contents. In HTML 4, <div> element was what website builders used before the advent of HTML 5. In other words, <article> element is the replacement of <div> element.
Let’s consider an example to clearly understand how <article element works.
<article>
<h1>Welcome To Codinglegit<h1>
<p>enter the content of your article</p>
</article>
It will look like this on your text editor
Save and open it, the result will look exactly like this
2. THE <SECTION> ELEMENT
The <section> element segmentally contains the blog post or page of a website. It is used to partition contents of an article or blog post. It is important to note that <section> element is used inside the <article> element.
Carefully observe the example below:
<article>
<h1>Welcome To Codinglegit<h1>
<section>
<h1>Our services</h1>
<p>enter here what you offer</p>
</section>
</article>
It will look like this
Save it and then open it, the result will resemble this
3. THE <ASIDE> ELEMENT
The word ‘’word’’ aside is not unfamiliar especially to literature students. Aside in this context is used to refer to contents that are separate but indirectly related to the main content. For instance, contents in the sidebar of a website can be regarded as an aside. More so, <aside> tag can be used within an <article> tag. If you want to use it with article tag, make sure that the content within the <aside> tag is not unconnected to the main content.
Let us consider an example
<article>
<h1>Welcome To Codinglegit</h1>
<p>In this website you will be learning HTML, CSS, PHP, etc</p>
<aside>
<p>All the lessons on this website are free access</p>
</aside>
</article>
It will look like this on your text editor
Save and open it, the result will look like this
WRAPPING UP
In our next lesson, we’ll be looking at Scalable Vector Graphics (SVG), alongside <audio>, <video> and <progress> elements. Till then, keep investing in yourself. In case you have any question, inquiries, etc, feel free to use the comment box below.
Thursday, December 27, 2018
HOW INLINE AND BLOCK ELEMENT WORKS IN HTML| ILLUSTRATIVE EXAMPLES
BLOCK
,
ELEMENTS
,
HTML
,
HTML BASICS
,
INLINE
No comments
:
Hi, I welcome you to our last lesson on HTML. In today’s lesson. We will be discussing, (with examples) the difference between an inline element and block element. Let’s move on.
1. INLINE ELEMENT
In HTML, inline elements are those elements that are displayed without line breaks. Inline elements in HTML includes <a>, <b>, <em>,<strong>, <img>, <input>, <span> and many more. You can use these elements together with CSS especially when you want style texts. <span> for example is the inline element that is used as container of the part of texts that you want to style.
For further elucidation, it will not be unwise if we consider at least one example.
Open your text editor as usual and key in the following codes below.
<html>
<Body>
<h1>We
<span style=’’color:red’’>love</span>
You<h2>
</body>
</html>
It will look like this
Save and open it, it will look like this with color
2. BLOCK ELEMENT
In HTML, block elements usually start with a new line. Some of the block elements in HTML include <h1>, <form>, <li>, <ol>, <ul>, <div>, <p>, <pre>, <table> and so on. <div> is the block element used as container of some part of text you are willing to style. It is pertinent to note that <div> element together with CSS.
For example, write the following codes in your text editor
<html>
<body>
<h1> Breaking News</h1>
<div style=’’background-color:red; color:white; padding:20px’’>
<p>Mabel wins Nsukka Grammy Awards </p>
<p>Dr. Mohammad elected new ABU VC</p>
</div>
</body>
</html>
It will look like this
Save and open it, you will see something like this.
WRAPPING UP
In our next lesson, we will be moving to HTML 5, which is the newer version of HTML. Keep practicing and practicing. Don’t forget to utilize the comment box below to ask your questions, observations or point out the areas you feel I poorly addressed. I gladly and positively respond.
Wednesday, December 26, 2018
PRACTICAL GUIDE ON HOW TO COMBINE COLORS AND ADD FRAME ON A WEBSITE
FRAME
,
HTML
,
HTML BASICS
,
HTML COLORS
,
WEBSITE
No comments
:
I humbly welcome you to today’s lesson. Hope you’re doing well. I will be teaching you how to combine HTML colors and add frames to a website or a blog. This is the second to the last lesson (i.e penultimate lesson) we will be looking at before we go into HTML 5 and subsequently, CSS course. In this lesson, I will first discuss HTML color, different color combinations we have, and how to manipulate different colors in HTML. The last part of the lesson will be devoted to learning how to create frame on a website or a blog. Let’s get started.
1. How to use HTML colors
HTML colors are represented in hexadecimal value. These hexadecimal values include 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. If you count all these values from 0-F, you will discover that all the values amount to 16. Zero (0) represents the lowest value while F represents the highest value. Moreover, it is important to state here that colors in HTML are displayed in a combination of Red, Green, and Blue, (RGB). Hence, different colors are formed from this main colors by combining the hexadecimal values. This combination of hex value must begin with hashtag symbol(#) and then followed by three(3) or six (6) hex character.
There are over 15 million RGB color combination of color value in HTML. Because of time and space, we will be looking at a few combinations.
#FF00000 represents Red Color
#000000 represents Black Color
#00FF00 represents Green color
#0000FF represents Blue color
#FFFFFF represents White Color
#777777 represents Gray Color
You can mix as many as you can.
Practical Example on How HTML color works
If we want to apply some colors to a web page of a website or a blog, let’s say we want to change the background color and font color. Then do the following
Open your text editor and key in the following codes below. The result will amaze you.
<html>
<head>
<Title>Home Page</title>
</head>
<body bgcolor=’’#0000ff’’>
<h1>
<font color=’’#c1250f’’>Idike Mabel</font>
</h1>
</body>
</html>
It will look like this in your text editor
Save and open it, the result will appear like this
Save and open it, the result will appear like this
2. Adding Frames to a website
If you want to add a frame to your website or blog, you can use <frame> tag. <Frame> tag helps you to partition (or divide) website or blog into different sections. If you want to define the number of columns or rows on the frame, <frameset> element can help you do that.
Each of the frames in a <frameset> can have different characteristics such as scrolling, border, the ability to resize and so on.
Each of the frames in a <frameset> can have different characteristics such as scrolling, border, the ability to resize and so on.
I want you to have an opprobrious look at the example below:
<frameset cols= ‘’100,25%, *’’></frameset>
<frameset rows=’’100,25%, *’’></frameset>
Also, if you want to prevent a user from resizing the <frame> element, use <noresize> attribute
For example,
<frame noresize=”noresize”>
WRAPPING UP
Practice this lesson over and over again in order to familiarize yourself with all we’ve discussed above. In our next lesson, we ’ll be looking at our last lesson on HTML. Keep investing in yourself.
STEP BY STEP GUIDE ON HOW TO CREATE & DESIGN A TABLE ON A WEB PAGE
Happy to meet you again on this platform, let’s do it again. In today’s lesson, I will be teaching you how to construct and design a table using HTML codes. If you’re willing to hold hand with me, then I will walk you through this lesson with no iota of stress. Get your text editor ready, let’s go to work.
HOW TO CREATE A TABLE ON A WEB PAGE USING HTML
In HTML document, tables are indicated using the <table> tag. Generally speaking, tables are characterized by rows and columns. Creating a row and a column in HTML require unique tags. For rows, you use <tr> and then <td> for columns.
Note that the <td> tags act as data containers within the table. What I mean by this is that <td> tags contain all kind of elements such as text, images, lists, to mention but a few. Confusing? Never worry, you will understand better as we progress. Just bear in mind that <td> tags behave like data containers.
If you want to create, let’s say one row and four columns. Here is the formula to follow:
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
Before we move on, there are three things I would want you to know. These three things include border attributes, colspan and bg color. Let's briefly overview them.
a) Border Attribute
A border attribute is used to add border to a table.
It is used within the table tag like this
<table border=’’2’’>
b) Colspan
Colspan is, on the other hand, used to expand or extend a cell so that it will look longer than other cells.
To fully understand what I mean by the above statement, let us consider an example. Therefore, write the following codes into your text editor.
<table border=‘’2’’>
<tr>
<td>Love</td>
<td>Peace</td>
<td>Unity</td>
</tr>
<tr>
<td><br /></td>
<td colspan=’’2’’ ><br /></td>
</tr>
</table>
It will look like this
Save and open it, the result will look like this
c) Align Attribute
To change the table’s position, you can use align attribute within the table tag just as you did in border attribute. That is
<table align=’’center’’>
d) Bgcolor attribute
To specify the background of any cell in a table, use the background-color attribute.
Study the example below to understand what i mean.
<table border=’’2’’>
<tr>
<td bgcolor=’’green’’>Love</td>
<td>Peace</td>
<td>Unity</td>
</tr>
<tr>
<td>One</td>
<td Colspan=’’2’’’>Nigeria</td>
</tr>
</table>
It will look like this
Save and open it will look like this
WRAPPING UP
Please note that CSS is more effective and beautiful than HTML in the case of styling elements. In CSS is the best. When we get to CSS course you will understand.
Monday, December 24, 2018
PRACTICAL STEPS ON HOW TO ADD IMAGE AND LINK TO A WEB PAGE USING HTML
In today’s lesson, you will be learning how to insert an image and embed link using HTML. I will explain in simple steps how you to add an image to a web page, with the backing of illustrative example. And in the latter part of this lesson, I will devote my time, take you by hand and then walk you through the procedures you can use to add link to a page, image or text.
Let us now begin.
1. ADDING IMAGES TO A WEB PAGE
Adding image to a web page can be very captivating. Images play a very significant role on the pages of websites or blog. It is simply an ‘attention grabber ‘ of web pages. Studies have equally shown that visitors of a website or blog tends to stay longer on the pages with colorful images or pictures than those that contain only texts.
For you to add image on a web page, what you need to do is to use image tag. Image tag in HTML is usually represented by <img> . this implies that you can insert image(s) on a web page by simply introducing <img> tag within the <body> tags of HTML document. The complete format you will use to insert image is:
<img src=’’imagename.jpg’’ />
TAKE NOTE
a) Make sure that the image you intend to add is in the same folder where you will save your HTML file.
b) Also, remember to add the .jpg extension, even if the image on the folder shows an extension of ''.jpeg''
c) Note that the smaller the image size, the faster the page load speeds.
For further, elucidation, it will be lovely if we harmoniously consider at least one example.
So, kindly open your text editor and write the following codes below:
<html>
<head>
<title>Unachukwu Daniel</title>
</head>
<body>
<img src="Daniel.jpg" alt="">
</body>
</html>
It will look like this
Save it in a folder that has an image bearing Daniel (or any name you wish to use. Then open it.
It will look like this
Isn’t it amazing? Of course, it is! Let's move to the next subject matter.
2. Adding Link to a web page using HTML
I would like to define ‘link’ idem per idem. So, a ‘link’ is used to link one thing (e.g image, text, pages etc. ) to another place. Links can be inbound or outbound. If it is inbound, it will link one thing from another within the website or blog. When it is outbound, the link will be going out of the website or blog entirely to another website.
The formula for adding link in HTML goes like this:
<a href=’’the link’’ target ‘’ ‘’’>link title
</a>
For example, let’s say I want to add a link to a page titled ‘Contact us’ in our tutorial website www. Codinglioness.b;logsppot.com.
I will follow this step
<a href=’’https://www. Codinglioness.b;logsppot.com./contact-us/’’ target ‘’ ‘’’>Contact Us
</a>
WRAPPING UP
I believe you’ve learnt something in this lesson. Our next lesson, we will also treat two topics before we move to HTML 5. Till then, keep practicing, keep learning.
Sunday, December 23, 2018
STEP BY STEP GUIDES ON HOW TO CREATE LIST ON A WEB PAGE USING HTML
In this lesson, we will be learning how to create lists on a web page using HTML. Kindly note that this lesson will utterly be confusing and difficult to understand if you’ve not practically been following our previous lessons. But if you're putting all these lessons into practice, then you have no worries.
Let’s quickly move on.
1. HOW TO CREATE LIST USING HTML
The mastery of list creation in HTML can help you outline important points when coding. In HTML, lists are classified into two major division. Namely: a)ordered lists and b)unordered lists.
a) Ordered List
Ordered list as the name implies is those list items that are numbered or ordered. I don’t know better words to use, but just note that items in the ordered list, items are arranged in numbers instead of bullets or asterisks. In HTML, ordered lists make use of <ol> tags and each of the item on this list is defined by the <li> tag. Please, you have to take note of these simple tags, (i.e <ol> meaning ordered list and <li> meaning list).
To familiarize this ‘ordered list’ of a thing, it is not unwise to consider at least one example. Are you ready? Fine, open your text editor. (Sublime text preferably. If you don’t have it, you can search for it on Google and download it. it is just a few megabytes. After installation, open it and type the following code below:
<html>
<head>
<title>Codinglegit of the Year</title>
</head>
<body>
<ol>
<li>Aisha</li>
<li>Aanuoluwapo</li>
<li>Lilian</li>
</ol>
</body>
</html>
It will look like this in your text editor:
Then save it as .html or.htm and open it in the folder using any web browser of your choice. It does not require internet connection.
The result will appear like this below
Please drop your comment below if you encounter any difficulty.
b) Unordered Lists
This is another kind of list in HTML. It is, as the name suggests, a list in which its items are not ordered. It is usually marked with bullets. Importantly, also note that unordered begins with the <ul> tag, unlike an ordered list which begins with <ol> tag. Let us consider the example below.
Input the following codes to your text editor
<html>
<head>
<title>Unachukwu Daniel’s Friends</title>
</head>
<body>
<ul>
<li>Aliyu</li>
<li>Babatunde</li>
<li>Emeka</li>
</ul>
</body>
</html>
It will look like this in your text editor
Save and open it. the result will look like this:
WRAPPING UP
In our next lesson, we going to be considering how to create tables and as well how to style it. However, kindly note that styling of these tables is more effective and beautiful in CSS than HTML. In fact, CSS is the king of styling. We shall yet get to CSS course this week. After tables, I will combine the remaining lessons except HTML 5 which I will treat separately for a reason.
Subscribe to:
Posts
(
Atom
)
