Showing posts with label ELEMENTS. Show all posts
Saturday, January 26, 2019
WHAT YOU SHOULD KNOW ABOUT PSEUDO CLASSES AND PSEUDO ELEMENTS
CSS
,
CSS3
,
ELEMENTS
No comments
:
Hi, in today’s lesson, I will be teaching you how to use pseudo classes and pseudo elements in Cascading Style sheet without making reference to JavaScript or any other scripts. Prior to the release of CSS 3, it was almost, (if not absolutely) impossible to style an element or part of an element in a document without using scripting languages like JavaScript, and so on. Hence, the integration of pseudo classes and pseudo-elements in the latest version of Cascading Style Sheet brought joy unspeakable to most web designers and developers. Therefore, with the knowledge HTML and CSS, you can still do amazing miracles to the making of a fully-fledged website. Let’s briefly discuss the subject of our discourse before heading straight to examples.
1. Pseudo Class
A pseudo-class is a remarkable feature in CSS 3 that enables web designers or developers to add style to a certain element (e.g. text,) in a document independent of scripting languages. A pseudo-class usually begins with a colon (:) in Cascading Style Sheet (CSS). The :first-child pseudo class, and the :last-child pseudo class are the most popularly used pseudo-classes in CSS. However, professional web designers and developers, in addition, make use of .nth child (n) because it accepts integer values. The :first-child pseudo class, and the :last-child pseudo class is very common in CSS. Just as the name implies, there’s an iota of difference between the :first-child pseudo class and the :last-child pseudo class. The former corresponds to an element that is the first child element other elements, while the latter matches the last child of other elements. For proper understanding, let’s hit the brake pedal in other to exemplify the above. Write the following codes in your text editor.
HTML
<div id="parent">
<p> This is your first paragraph</p>
<p> This is your second paragraph</p>
<p> This is your third paragraph</p>
<p> This is your fourth paragraph</p>
<p> This is your fifth paragraph</p>
</div>
CSS
#parent p:first-child{
color: blue;
text-decoration: underline;
font-size: xx-large;
}
#parent p:nth-child(2){
color: red;
text-decoration: line-through;
font-size: x-large;
}
#parent p:nth-child(3){
color: green;
text-decoration: overline;
font-size: larger;
}
#parent p:nth-child(4){
color: purple;
text-decoration: none;
font-size: larger;
}
#parent p:last-child{
color: orange;
text-decoration: blink;
font-size: large;
}
REFERENCE THE CSS IN THE HTML FILE, IT WILL LOOK LIKE THIS
SAVE AND OPEN IT, THE RESULT WILL LOOK LIKE THIS
2. Pseudo Elements
In CSS, pseudo-elements are mainly used for the purpose of selecting a specific part of a text in a document tree. Pseudo-element, unlike pseudo-class, often start with a double colon (::). Generally, there are about five basic pseudo-elements in the cascading style sheet. They include:
a) ::first-line: it is used if one wants to select the first line of text in a paragraph.
b) ::first-letter: it is used to select the first letter of text in a sentence
c) ::before: it inserts some contents before an element.
d) ::after: it inserts some contents before an element.
e) ::selection: It highlights a portion of an element in a paragraph selected by the user. This means that when a visitor of a website tries to select a particular group of words, the color will change to the one defined by a web designer using ''::selection'' element.
Example, write the following codes below;
HTML
<body>
<p> CSS, an acronym for Cascading Style Sheet is a style sheet language written or attached to Hypertext Markup language. The first word Cascading in the acronym refers to a way CSS applies one style on top of another. The last part of the acronym Style Sheet, on the other hand, is used to control the look and feel of a web document. </p>
</body>
CSS
p::selection{
background-color: red;
color: white;
}
REFERENCE THE CSS IN THE HTML DOCUMENT
SAVE AND OPEN IT. THEN TRY SELECTING OR HIGHLIGHTING SOME WORDS
WRAPPING UP
You can try different elements such as the first letter, first line, and so on, to see how they work. Practice is also the soul of self-improvement. So I urge you to keep practicing. Our next lesson lays its weight on transitions.
Sunday, December 30, 2018
COMPLETE GUIDE ON HOW TO USE AUDIO, VIDEO AND PROGRESS ELEMENT
In this lesson, we will be considering audio, video and progress element. To avoid complexity, I adjure you to practically follow me as we move on.
The <audio> element
The Audio element helps you to add audio to a web page. Prior to the introduction of HTML 5 in 2016, playing audios on a web page almost seems impossible. You either download the audio file and listen to it afterwards or you forget about it. Thanks to HTML 5 for providing a unique way of embedding audio (s) on a web page. All you need to do is to add the URL of the audio inside the audio element. C’ést fini.
Strikingly, you can do this using two methods. One is expressed as follows
<audio src=’’audio URL’’ control>
Your browser may not support audio
</audio>
Note These:
a. Those words within the audio element (i.e ‘’Your browser may not support audio’’). It will appear if you are not using the latest web browser.
b. To check if your browser is compatible with HTML 5, visit: www.html5test.com. It will tell you everything about your current browser.
c. You can also download HTML code play on Google play store if you are using an android phone.
Another way to embed the audio file on a web page is expressed below:
<audio control>
<source src=’’audio URL’’ type=’’audio/mpeg’’>
<source src=’’audio URL’’ type=’’audio/ogg’’>
Your browser may not support audio
</audio>
Note Also
HTML 5 as at the time I'm writing this article (Dec 30th, 2018) only support three audio formats. Namely; mp3, ogg and wav.
Let us consider one example before we move to the video element. Open you text editor now an write the following codes below
<audio src=’’http://www.centapreneur.com/upload/audio.mp3’’ control>
Your browser may not support audio
</audio>
It will look like this on your text editor
Save and open it, you will see something like this
NOTE
If you want the audio to start playing as soon as it loads without asking for the persmission of your website visitors, simply use the <autoplay> attribute.
Example
<audio controls autoplay>
<Source src=’’http://www.centapreneur.com/upload/audio.mp3’’ control>
Your browser may not support audio
</audio>
Save it and open it the audio will automatically start playing without your consent.
2. The <Video> element
The video element is similar to the audio element. The only difference is that the video element displays audio-visual characters, unlike the audio element. Also, the video source URL is indicated in the video element. To elaborate further, it will be appropriate if we consider an example.
So study the following codes below:
<video control>
<source src ’’http://www.centapreneur.com/upload/video.mp4’’ type ‘’video/mp4’’>
<source src ’’http://www.centapreneur.com/upload/video.ogg’’ type ‘’video/ogg’’>
</video>
It will look like this in your text editor
Save and open it, the result looks like this
IMPORTANT
a. HTML5 at the moment of the composition of this article (30/Dec/2018) only supports three video formats; namely mp4, WebM, and Ogg.
b. Also, if you want autoplay of the video, succinctly follow the formats stipulated in audio element.
3. The <progress> element
You may have come across a loading bar or status bar when downloading something over the internet. It can be created using the progress element. Relax, I will teach you how to do that in a moment. However, it important to sagely state here that the progress element can be used inside <heading>, <body> or <p> tags. The choice is totally yours.
IMPORTANT
There are a few things I would like you to note before we continue. They include:
VALUE: it is used to indicate the current value of a task that has been completed
MIN: it is used to define the lowest value of a task
MAX: it indicates the total value required for completion of a task.
To drive home the above points, it won’t be inappropriate if we consider at least one example.
Write the following codes into your text editor
Status: <progress min’’0’’ max‘’100’’ value‘’67’’
</progress>
It will look like this in your text editor
Open it after you’ve saved it, it will look like this
WRAPPING UP
Next lesson will be on creating beautiful but amazing shapes using scalable Vector graphics. Keep learning, keep investing in yourself.
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.
Friday, December 28, 2018
GETTING STARTED WITH HTML 5| ALL YOU NEED TO KNOW
HTML 5 is the latest version of HTML. This means that HTML has older versions such as HTML 4, HTML 3,and so on. HTML 5 came with numerous features that made it uniquely unique. It has, for instance, a default character encoding commonly known as ‘charset.’ The ‘’charset’’ of a thing is expressed in the manner below:
<meta charset=’’UTF=8’’>.
Another striking feature of HTML 5 is its introduction of ‘’DOCTYPE’’ (document type) at the beginning of HTML document. My mentor often calls it ‘Door-opener’ of markup language.
This means that for a code to be valid in HTML 5, you must first declare the ‘’DOCTYPE’’. In other words, you have to signify the language you are using before you proceed. The format you can use to declare your document type is below:
<!DOCTYPE html>
It is also pertinent to note that some special elements are included in HTML 5. These elements include <video>, <audio>, <datalist>, <aside>, <canvas>, <progress> and many more. More so, this newest version of HTML has API (That is, Application Programming Interface). That sounds amazing.
But wait a minute… you seem confused? Hmm, well, never mind, as we progress you will understand better, I promise.
If you’ve not studied our previous lessons on HTML, then double confusion continues. But if you’ve practically been following me, can I once again take you by hand and walk you through this HTML hot-cake? Okay, let’s move on.
THE IMPORTANT PAGE ELEMENTS OR STRUCTURES IN HTML 5
One of the important page elements or structure in HTML 5 is the <header> (this is totally different from the <head> tag we discussed in our first lesson on HTML). The <header> here may contain things such as the site logo, etc. Other HTML 5 elements include: the <nav> element (for easy navigations), the <footer> element (usually at the bottom of a website), the <video>, the <audio>, the <section>, the <canvas>, the <aside> element and so on.
These are the most important aspect of HTML 5, hence, I will try my possible best to resist every temptation of rushing over the lesson. Make sure you practice with me, please.
For easy comprehension, I will be considering the first three most important page element in this lesson. Are we good to go? That’s splendid!
1. The <header> element
This element is different from the <head> as we’ve stated above. The <header> element is used between the <body> tags to indicate website or blog headings. It is also good for placing advertisements. For instance, If you are applying for Google AdSense (for monetization of a blog), they will request you place a certain ad code within your blog <header> section.
The example below provides us with a resplendent illustration on how the <header element work. Open your text editor and type in the following codes (Remember, we will first declare our doctype.
In a jiffy, can you succinctly tell me the doctype we will be using? ….no, try again…… Yes, you got it!).
So write the following code below
<!DOCTYPE html>
<html>
<head></head>
<body>
<header>
<h1>Happy Christmas Dear</h1>
<h4>And Happy New Year</h4>
</header>
</body>
</html>
It will look like this on your text editor
Save it and then open it with your web browser. It will look like this ( Note: it doesn’t require internet connection)
2. The <nav> element
The <nav> Element is used to define a page or part of a page that is linked to another page or part of a page.
Let’s critically examine the example below:
(NOTE: the hashtag symbol (#) is where you can put your link to the page.)
<nav>
<ul>
<li><a href=’’#’’>Home</a></li>
<li><a href=’’#’’>About Us</a></li>
<li><a href=’’#’’>Contact Us</a></li>
<li><a href=’’#’’>Disclaimer</a></li>
<li><a href=’’#’’>Privacy Policy</a></li>
</ul>
</nav>
It will look like this in your text editor
Save it and then open it. You will definitely see something like this
3. The <footer> element
The <footer> element as the name suggests, is located at the bottom of every website or blog. When building or designing the footer of a website or blog, this element usually plays a very significant role.
Follow the format below whenever you want to work on the footer section of a website or a blog.in ot
<footer></footer>
For example,
<footer>About the Author</footer>
WRAPPING UP
Practice, Practice, Practice. That is the success secret that remained secret to most people reading this. See you in my next lesson.
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.
Subscribe to:
Posts
(
Atom
)
