Skip to main content

HTML BASICS : CLASS 109 part I

Hello and welcome back to this tutorial series for beginners in web development.
This class introduces the html 'div' tag and form elements.

Let's begin by learning about the html 'div' tag.
"div" stands for division.
It allows you to group and separate content into different sections.
Consider the image below.


The image above shows a common layout (way of arranging elements)  for many web pages.
It consists of;
  1.  a top area called the header, where most sites place a logo and site name as well as navigation links (links to other parts of the website) 
  2. a bottom area called the footer, where most sites place contact information and social media links.
  3. a side bar, which can be on the right side or left side. Some sites have two side bars, one on each side.
  4. and a main content area, where the main content of the page is displayed.
For example.
This blog site has a header at the top. It contains the name of the site 'In Relatable Terms' and a 'SEARCH' option.
It has a single side bar, on the right side (scroll to the top of site to see it). It consists of a SHARE link (which you are encouraged to use) and some labels below it.
The main section consists of the main blog content i.e. this particular text you are reading  , a comment section and a few popular posts on this blog (scroll down to see).
The footer area has the 'Powered by Blogger' link.

The html 'div' tag is used to divide webpage content into sections like these.
It has an opening <div> and a closing tag </div>.

Now, let's learn a bit about forms.
Forms allow website users/visitors to provide some kind of information, such as username and password in order to sign in, comments, words to search in the website e.t.c.

A form is made up of several elements, each of which is used to obtain specific kind of information.
A form has an opening tag <form> and a closing tag </form>
Inside the tags, the form elements are specified.
We shall learn three common form elements, for now;
  1. Input element. This is used to obtain small text input from a user, such as name, password, telephone number, email etc.
  2. Textarea element. This allows users to provide a lot more text compared to the input element above. It is commonly used to create a comment section, such as the one below.
  3. Button. This is a clickable form element that is used to trigger (cause) a certain action to occur. For example, a sign in button is clicked when a user is done filling in the login form in order to sign/log the user in.

In the next part, we shall practically see how the above elements function.






Labels:

Comments

Post a Comment

Popular posts from this blog

CSS BASICS : CLASS 109 part III

Hello and welcome back to this tutorial series  for beginners in web development with HTML & CSS. We have been discussing form and div elements in the previous sections of this class (see class 109 part I and II ). You should have 2 files, one sections.html file and another sections.css file linked to it. Next, we will discuss the css code we used in the sections.css, particularly 2 new attributes ' display ' and ' float ' .  This is the CSS code that we used to style our sections.html page. #header{     background-color: grey;     padding-top: 5px;     padding-bottom: 5px;     padding-left: 15px; } h2{     margin: 0px;     color: white; } #content{     padding-left: 15px; } p{     display: inline-block;     float: left;     margin-right: 50px; } form{     display: inline-block;     border...
Post a Comment
Read more

HTML & CSS BASICS : Comments & Review

Hello and welcome back to this tutorial series. Today we shall review many of the concepts we have learned so far (class 101 through class 109) and introduce a few others. Being programmers, we are going to do this by coding a simple web page. Your task is to see if you understand all that is happening , if not, then be sure to revisit a previous tutorial on the subject and re-read it. Along the way, I will be recommending common practices for organizing & writing your code. Let's get started. I recommend storing your web-project files as follows; Create a new folder (for a new web project). Inside it, create 2 folders, one for html files and one for css files.  For this work, create a new folder and name it review .  Inside it create two folders , name one styles and the other html . Open Sublime Text or whichever text editor you prefer, drag and drop the review folder onto the Sublime Text's window. You should see the folder on the left-side (left-panel) ...
Post a Comment
Read more

HTML BASICS : CLASS 102

Hello and welcome back. This is the second class in a series of tutorials for beginners in web development. You can access the first one here. By this point you should have a file named my_site.html with the following code in it: <!DOCTYPE html> <html> <head>     <title></title> </head> <body>     <h4>NASA | JPL</h4>     <h1>ON A MISSION</h1>     <h2>PODCAST</h2> </body> </html> Great! It is a bit weird having a couple of headings with no further details, isn't it? Let us add some more text that explains what this whole 'NASA ON A MISSION PODCAST' stuff is about. For this we will use a different tag, the paragraph tag which opens with ' <p> ' and closes with a ' </p> ' .  After the bottom heading, type the following :  <p>A new podcast from NASA</p> Cli...
Post a Comment
Read more