Monday, October 8, 2018

Html Structure : Writing your First Web Page

html,web page,html tutorial,html (programming language),html structure,html5,html tutorial for beginners,html for beginners,html website,web development,html5 (programming language),introduction to html,first web page,html5 tutorial,html css,web,html basics,lets create our first html project,structure,let's create our first html project,let's create our first html project and document
Html Structure : Writing your First Web Page

Html Structure in our last post we explain what Html Language is, how people access the web, and how does the web works, if you haven’t read the post click here to read. A lot  of people dont know how to structure their HTML Pages.   

Html: Introduction to Markup Language. Today we’re gonna explain the Structure of a Html Language, learning about Markup and some Tags and Elements. 

We come across all kinds of documents every day of our lives. Newspapers, insurance forms, shop catalogues... the list goes on. Many web pages act like electronic versions of these documents. For example, newspapers show the same stories in print as they do on websites; you can apply for insurance over the web; and stores have online catalogs and e-commerce facilities. In all kinds of documents, structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document. So, in order to learn how to write web pages, it is very important to understand how to structure documents. So in this post you will understand.

·        How HTML describes the structure of a web page
·        Learn how tags or elements are added to your document
·       Write your first web page

HOW HTML DESCRIBE THE STRUCTURE OF A WEB PAGE.

In the browser window you can see a web page that features exactly the same content as the Word document below to describe the structure of a web page, we add code to the words we want to appear on the page. You can see the HTML code for this page below. Don't worry about what the code means yet. We start to look at it in more detail on the next page. Note that the HTML code is in blue, and the text you see on screen is in black.

<html>
    <body>
            <h1>This is the Main Heading</h1>
<p>This text might be an introduction to the rest of the page. And if the page is a long one it might be split up into several sub-headings.</p>

<h2>This is a Sub-Heading</h2>
<p>Many long articles have sub-headings so to help you follow the structure of what is being written. There may even be sub-sub-headings (or lower-level headings).</p>
<h2>Another Sub-Heading</h2>
<p>Here you can see another sub-heading.</p>
</html>
    </body>

The HTML code (in blue) is made up of characters that live inside angled brackets — these are called HTML Elements. Elements are usually made up of two tags: an opening tag and a closing tag. (The closing tag has an extra forward slash in it.) Each HTML element tells the browser something about the information that sits between its opening and closing tags.

In the above code, the highlighted codes in blue are the Html Tags or Element; we have the opening tags and the closing tag in which the Document is shown in the browser. Tags are added at the beginning and ending of each sentence as you can see above.

STRUCTURE OF HTML TAG

Structure of a Html Tag looks like the explanation below, let’s look at the structure of a P Tag which is paragraph tag.


<P>
Left-angle bracket                                           RIGHT-angle X
  (less-than sign)                                               MORE-than sign)


The character or letter in the bracket indicates the tag’s purpose. As seen above the character stands for paragraph. In the closing tag there is a slash after the left-angle bracket. See below for example:



</P>
Left-angle bracket                                           RIGHT-angle X
  (less-than sign)                                               MORE-than sign)


As seen above the slash is after the left-angle bracket which is the less than sign.

WRITING YOUR FIRST WEB PAGE

Yes we’re going to write our first Html Web Page, to write our first Html Page we will introduced the structure of Html Page which is explain below:

<body>
You met the <body> element in the first example we created. Everything inside this element is shown inside the main browser window.

<head>
Before the <body> element you will often see <head> element. This contains information about the page.

<title>
The content of the <title> element are either shown at the top of the browser, above where you usually type in the URL of the web page you want to visit, or on the tab for that web page.

Ready we have started coding……


CONCLUSION

We have explained the full details on Html Structure in the below tutorial. If you have any question feel free to ask, comment, like and share to your friends.


Sunday, September 30, 2018

Introduction to Html Language

Introduction to Html Language


As promised earlier, this blog will be a library of learning Web Design , in this post we will learn about the Introduction  to Markup language, what it really takes to learn Web Development, firstly this blog is for people who will to learn Web Development from scratch and anyone who has a website built with Platform such as Blogger, Wordpress but want to customized it more, I suggest this blog for you…

The only thing you need to start with is a computer with a web browser and a text editor, although we have many Text editor to use but I suggest downloading Sublime text 3, downloading it and installing it then you’re ready to go.

Is Html Hard to Learn?

Many website and books that teaches HTML and CSS resemble dull manuals. To make it easier for you to learn, we threw away the traditional template used by publishers and redesigned this blog to make it easy for you to learn and build profitable website online

The answer is No, when you learn Html and css then put it into practice, then trust me within matter of time, you’re gonna know it.


Read Also:  Who Is A Web Developer Vs Web Designer





How People Access The Web?

Before we look at the code used to build websites it is important to consider the different ways in which people access the web and clarify some terminology. We have three different ways by which people access the web which are:
·       Browser: People access websites using software called a web browser. Common examples include Firefox, Internet Explorer, Safari, Chrome, and Opera. In order to view a web page, users might type a web address into their browser, follow a link from another site, or use a bookmark then it goes to the web page.

·       Web Server: When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a web server which hosts the website. Web servers are special computers that are constantly connected to the Internet, and are optimized to send web pages out to people who request them. Some big companies run their own web servers, but it is more common to use the services of a web hosting company who charge a fee to host your site.

·       Devices: People are accessing websites on an increasing range of devices including desktop computers, laptops, tablets, and mobile phones. It is important to remember that various devices have different screen sizes and some have faster connections to the web than others.
Note: Screen Readers are also among the ways by which people access your website. Deformities and eye blindness and all visual impairment are used to learn.  

How Does The Web Works?

When You Visit A Website, The Web Server Hosting That Site Could Be Anywhere In The World. In Order For You To Find The Location Of The Web Server, Your Browser Will First Connect To A Domain Name System (DNS) Server. When you connect to the web, you do so via an Internet Service Provider (ISP).


Read Also:  Top 20 HTML Tags Used By The Best Programmers In The World


You type a domain name or web address into your browser to visit a site; for example: google.com, bbc.co.uk, microsoft.com. Your computer contacts a network of servers called Domain Name System (DNS) servers. These act like phone books; they tell your computer the IP address associated with the requested domain name.

An IP address is a number of up to 12 digits separated by periods / full stops. Every device connected to the web has a unique IP address; it is like the phone number for that computer. The unique number that the DNS server returns to your computer allows your browser to contact the web server that hosts the website you requested.

 A web server is a computer that is constantly connected to the web, and is set up especially to send web pages to users the web server then sends the page you requested back to your web browser.


CONCLUSION

In this post we have discuss the introduction of HTML Markup Language, how people access the web, how html can be successfully learned, what and what it takes to learn Html Language.

Hope this is useful, Try to subscribe to our Newsletter to get updated on every our post on how to learn Web development from scratch.

Feel free to ask any question in the comment box, and share to your fiends’ too.

Tuesday, September 11, 2018

Top 20 HTML Tags used by the best programmers in the world

Top 20 HTML Tags used by the best programmers in the world


There are over 3trillion website on the internet and have you ever wondered which Html tags are the most famous, always reoccurring in the source code of every awesome website you come across?

Here are 20 Html tags used mostly:

 

HTML HEADING TAG

The html heading tag defines with <h1> to <h6> tag. In web design we have six levels of headings ranging from <h1> to <h6>. The opening tag and the closing tag.

<h1></h1>: These headings are used for the main headings, it is the biggest and the largest heading, and also is good to place a keyword with the h1 tag. For example: <h1> WELCOME TO PROGRAMMING LINE </h1>, in this result it will bring out “WELCOME TO PROGRAMMING LINE” in a h1 tag.

<h2></h2>: H2 heading are used for sub-heading in a website deisgn or website development. For example: <h2> Development</h2>,this result will bring out “DEVELOPMENT”  in a h2 tag.

<h3><h3>: H3 tags are used for sections under the sub-menus. When you come across different website on internet you will see something like this.

<h4> tag and <h5> tag are used in series according to your decision. It has the opening tag and the closing tag.

<h6></h6>: This is the lowest and the smallest heading in Html Heading tag. For example :< h6>this is the lowest Html Heading Tag</h6>. It will display small when outputting the code or debugging.



HTML PARAGRAPH

The HTML Paragraph tag is defined by <p></p>.Any Html Tag code that opening tag must have a closing tag. The paragraph tag is used when one intend to write on a new paragraph.<p> is used at the beginning of the phrase while the closing tag must end with </p>

HTML BR TAG

The Html Br Tag defined by <br> tag only, it is used to enter a new line, when put at the end of sentences, the upcoming words will be in a new line. This Tag has no closing Tag. For example:  <p> I love eating rice and beans </p> <br>
              <p> I love eating beans and bread </p>

As seen in the example, the Br Tag is written at the end of the sentences so “I love eating beans and bread” will be on another line.

HTML LINKS

Html Links Tag are defined with the word <a> tag. The links are used in the menu to link to internal website pages and can be used anywhere to link to external website. The “href” attribute defines the link address.
For example: <a href=”www.facebook.com/login”> Login to facebook </a>

The <a> opening tag and closing tag are the link tag, while the href attribute point to the link www.facebook.com , the Login to facebook is the text that will be shown to the visitors of the website or blog.

HTML IMAGES

Html images are very important in web pages. To build a website it needs to contained responsive images. Html images are defined with <img>. Although it does not have a closing tag. Images can come either in Jpg form or Png form.


For example: <img src=”logo1.jpg” />

Images have some attribute which are “src, alt, height, width”
Images src: This means the source of where the image is save or is in a folder in your desktop or laptop Pc.
For example: <img src=”logo1.jpg” />

For easy navigation of site, I suggest to you to store all your images you want to use in a folder, and then recall the image in the code. For example: I create a new folder which I name “Web design” inside the folder am having my html code store there, and also I have a folder call ”Images” then in this folder I will save all my images there, then if I save a image of “logo1” in the images folder, if I want to call the image in Html code, it will be: <img src=”images/logo1.jpg” />

As seen when the browser check your site and it doesn’t find logo1.jpg image in the folder, the image will not shown.

Images alt: ALT is use to give a quick description of the image in case the image is not shown due to serve or service error the “alt” will show.
For example: <img src=”images/logo1.jpg” alt=”My Website logo” />

Images height: Images height is used to increase the height of the image to suite your desired choice.
For example: <img src=”images/logo1.jpg” alt=”My Website logo” height=”200px” />

Images width: Images width is used to increase the width of the image.
For example: <img src=”images/logo1.jpg” alt=”My Website logo” height=”200px” width=”150px” />

HTML TEXT FORMATTING TAG:

In HTML Text Formatting Tag we have the following Tag:
<b></b>: The “b” means bold which means it makes your text bold in between the opening tag and closing tag.
For example: <b> Bold </b>.

<i> </i>: The “I” tag means italic which means it makes your text been italic.
For example: <i> Italic</i>
<u></u>: The “U” tag means underline which makes your text been underline.
For example: <u>Underline </u>

All these tag which was stated below are use in HTML4 version, tags are now be in replacement with it in HTML5 version which  is current version. The tags which are now use in HTML TEXT AND FORMATTING TAG for HTML5 are:

<strong></strong>: This is the same as the bold but it makes it very bold.
For example: <strong> Very strong words </strong>

<em> </em>: The “em” tag is the same as italic which does the same work with the italic.
For example: <em> This makes the text italic </em>

HTML LIST TAG:

The option to make different types of list in MS word can also be done with HTML code too. In list we have ordered list <ol> and un-ordered list <ul>. And each item in the list should start <li> tag.

Ordered lists are numbers and can be customized in CSS which will be explain in this blog.


Examples of Ordered list:
<ol>
       <li> This is a list one</li>
<li> This is list two</li>
<li> This is list Three</li>
</ol>


Un-ordered list are bullets and also can be customized in CSS also.
 Examples of un-ordered list:

<ul>
       <li> This is a ball</li>
<li> This is a book</li>
<li> This is a Egg</li>
</ul>


HTML TABLE TAG:

If you need to add the table to you webpage you should use <table> tag. As any table, the HTML table is divided into rows (with the help of the <tr> tag) and the row is divided into cells accordingly (with the <td> tag). You can use text, links, images and even other tables as the content for the cell. That’s actually the way the HTML code was made long ago: the whole page area  was divided into table cells and each one contained some layout elements accordingly.

 Here’s the simple sell example
<table border=”1>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

HTML FORMS AND INPUT TAG:

Forms are very important in Web design, forms are usd to collect email list, to collect the information of a member and so on.
There’s no need to explain what a form is but there’s one thing we want to pay your attention to. The form in HTML is just the number of fields where you can type in the text, but that’s not the script that will send this info to your email or database. The <form> tag defines the form area. <input> tag is the field that has lots of the attributes depending on the content that should be entered to the field.

Example of simple form is:
<form>
First name:
<input type=”text” name=”firstname” />
<br />
Last name:
<input type=”text” name=”lastname” />
</form>

HTML TEXT AREA TAG:


The <textarea> tag defines a multi-line text input control, for example it can be used as the field for the message in your contact form.
For example:
<textarea rows=”2″ cols=”20″>
Please enter your comments, we will be glad to hear your feedback.
</textarea>

HTML DIV TAG:

This is a more a less new tag and it doesn’t have a separate special definition like link tag for example.
The <div> tag defines a division or a section in an HTML document. If you’re just starting you won’t be able to use it properly on your own, however feel free to edit the elements inside the div section as most often they are the same that we already studied.
When div tag are used in Html code it will be reference in CSS with a point  “.”
For example:

<div class=”container-fluid” >
Anything here will be in the container fluid
</div>

 HTML SPAN TAG:

same as <div> tag, the <span> tag is pretty new one. The <span> tag provides no visual change by itself but rather provides a way to add a hook to a part of a text or a part of a document. If all you need is changing several lines of text close your eyes on this tag, or if you want to apply that same “effect” to some other element, just copy the <span> tag and attributes to the place you’d like to.
For example: <span align: left; > MOONLIGHT </span>

HTML SELECT TAG:

The select tag is used for making dropdown list with some options. The option shows the option in the dropdown.
For example: list the location of where your offices are located in the globe for customers to choose.

<select>
<option value=”Chn” > China </option>
<option value=”Usa”> USA </option>
<option value=” Poland” > Poland </option>
<option value=”Grm”> Germany </option>
<option value=”Ngn”> Nigeria </option>
</select>



Above are the Html Tags used by the world programmer in the world. If you have question you can kindly drop it in the comment box.


Share with your friends too







Tuesday, August 21, 2018

Who is a Web Developer Vs Web Designer - Programming Line

Then when I meet new people they ask me what I do for a living, I replied am a “web designer”.  I use this term it represent it all that lets people know what I do, without confusing them with too-specific job title that someone outside of the web industry would likely not understand.

The fact that “web designer” is a generalization word is helpful in instance like I just said. They will be difference if you’re speaking with someone who is not a web professional, but when you’re speaking with a professional web designer may be form industry or whatever; the generalization may not conclude your profession.


Truthfully, many people use the terms “web design” and “web development”. Interchangeably, but they really do have two very different between them is numerous and the skills that set between them.

In this article you will understand the different between web developers and web designer. So let’s keep the ball rolling………



WEB DESIGN


The term “web design” is the most common used for front-end development. A web designer knows and codes less. They are the one who design the template of the site to make it user friendly. It involves how the site interacts with the customer.

Good web designers know how to use the principles of design to create a site that looks great. Their designs are easy to navigate because it’s so easy and intuitive to do so.

Another major point is that they visualize the whole project i.e. (website or web App), design the whole site in PSD format or even they design static pages using basic HTML and CSS. Simply creating a template.

 WEB DEVELOPER


How can a web developer without being an idea of web design, because web developer deals with the back-end and the front-end development.

Back-end development deals with the more advanced programming and interactions on web pages. A back-end web developer focuses on how a site works and how the customers get things done on it using certainly functionality. This could include working with code that interfaces with database or creating features like Ecommerce shopping carts that connect to online payment processors and more. Good web developers may know how to program CGI and scripts like PHP. They will also understand about how web forms work and how different software packages and APIs (application programming interfaces) can be used to connect those different kinds of software together to create solutions that will meet a specific customer's needs for their online presence.




CONCLUSION


 Web design is more about UI/UX graphics and appearance of the website.  While developers work with tools language of both the font-end and back-end development. Developers collaborate with the designer, creator to develop the project from scratch. They have the capability to use the template done by the designer to develop a dynamic or fully functional site or web app.

I think this article is being helpful. Kindly click the sharing buttons and share with your friends. I’m very sure they’ll love it! And comment below to know your opinion about this article.