In Relatable Terms

Posts

Showing posts from December, 2018

HTML BASICS : CLASS 109 part II

Hello and welcome back. In part I , we learned the theory behind the html div ta g and the form elements . We have quiet some coding to do in this part, so let's get to it. Create a new html file and name it sections.html . Open the file in your text editor (e.g. Sublime Text), type in the following code and save it. You can go ahead and view it on your browser afterwards, though it won't look quiet good just yet. <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="sections.css"> </head> <body> <div id="header"> <h2>My Site</h2> </div> <div id="content"> <div id="main"> <p>Welcome to my website.<br>Please give me your feed...

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; 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) a bottom area called the footer, where most sites place contact information and social media links. a side bar, which can be on the right side or left side. Some sites have two side bars, one on each side. 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 Te...

CSS BASICS : CLASS 108

Hello and welcome. In the previous post, we did a simple test. The correct HTML code for that is shown below; <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="my_site.css"> </head> <body> <h2 class="reds">NASA | JPL</h2> <h1 class="blues">ON A MISSION</h1> <h4 class="reds">PODCAST</h4> <p id="underlined">A new podcast from NASA</p> <ul> <li>Arrival</li> <li>We Are the World</li> <li>Worlds of Wonder</li> </ul> <ol id="roman"> <li...

CSS BASICS : TEST YOURSELF

Hello there. Welcome back to this web development tutorial series. We have learned a few concepts so far and before we continue, let's review them by doing a quick test. At this point, you should have a html file, named my_site.html with the following code in it; <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="my_site.css"> </head> <body> <h2>NASA | JPL</h2> <h1>ON A MISSION</h1> <h4>PODCAST</h4> <p>A new podcast from NASA</p> <ul> <li>Arrival</li> <li>We Are the World</li> <li>Worlds of Wonder</li> </ul...

CSS BASICS : CLASS 107

Hello and welcome back to this series of tutorials for beginners in web development. So far we have a simple html page and a css file linked to it. We begin this tutorial by creating new html and css files, in the same folder as where my_site.html is located. We shall call them index.html and index.css respectively. Done? Great! Link the two files together , by opening up index.html in your text editor (e.g. Sublime Text) and typing the following code below the closing title tag </title> and before the closing head tag </head> : <link rel="stylesheet" type="text/css" href="index.css"> Inside the body of your html (i.e after <body> and before </body>), type the following html code : <p> This is a paragraph </p> ...

CSS BASICS : CLASS 106

Hello and welcome back to this tutorial series for beginners in web development. This tutorial assumes you grasped all concepts discussed in the previous 5 html classes. You can test yourself using the exercise given here . At this point, your my_site.html file should have the following code in it. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <h2>NASA | JPL</h2> <h1>ON A MISSION</h1> <h4>PODCAST</h4> <p>A new podcast from NASA</p> <ul> <li>Arrival</li> <li>We Are the World</li> <li>Worlds of Wonder</li> </ul> <ol> ...

HTML BASICS : TEST YOURSELF

Hello and welcome back. Test your knowledge of the concepts we have learnt so far, by creating a website that looks as seen in images the below, before continuing with the next part. Click on each image to zoom in (or better yet, save them in your pc). You can get the image used by clicking here . As always, if you have any questions / comments, leave them in the comment section below.

HTML BASICS : CLASS 105

Hello and welcome to the 5th lesson in a series of HTML for beginners tutorials. In this tutorial, we shall; modify the size of the image we inserted in the previous lesson learn how to add links in our website. At this point, your my_site.html file should have the following code in it. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <h2>NASA | JPL</h2> <h1>ON A MISSION</h1> <h4>PODCAST</h4> <p>A new podcast from NASA</p> <ul> <li>Arrival</li> <li>We Are the World</li> <li>Worlds of Wonder</li> </ul> <ol> ...

HTML BASICS : CLASS 104

Hello and welcome back. This is the 4th lesson in a series of HTML for beginners tutorials. In this tutorial, we shall discuss how to add images in your website. At this point, your my_site.html file should have the following code in it. <!DOCTYPE html> <html> <head> <title></title> </head> <body> <h2>NASA | JPL</h2> <h1>ON A MISSION</h1> <h4>PODCAST</h4> <p>A new podcast from NASA</p> <ul> <li>Arrival</li> <li>We Are the World</li> <li>Worlds of Wonder</li> </ul> <ol> <li>NASA is cool</li...

HTML BASICS : CLASS 103

Hello and welcome to the third in a series of beginner level classes for web developers. In the previous lesson (see here ), we learned about the paragraph and list tags. At this point the code in your my_site.html file should look like this: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <h2>NASA | JPL</h2> <h1>ON A MISSION</h1> <h4>PODCAST</h4> <p>A new podcast from NASA</p> <ul> <li>Arrival</li> <li>We Are the World</li> <li>Worlds of Wonder</li> </ul> <ol> <li>NASA is cool...

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...

HTML BASICS : CLASS 101

For this, you will need a browser and a text editor . If you have a laptop or desktop, then you probably already have a browser installed ( Internet Explorer or Microsoft Edge if you are on Windows, Safari if you are on a mac ). However I recommend installing Chrome ( get it here ) or Firefox ( get it here ). By now, you probably know that a browser is simply a software used for browsing the internet. Another software you will need for this class, is a text editor. This allows you to write your code. I recommend using sublime text (get it here ). Great! Now your are ready to begin your "front end web development" (or simply, creating websites) journey. In your desktop (or anywhere you prefer saving your work) , create a folder myProjects . Inside this folder, create another folder and call it html. Open up sublime text and click ' file ' (top left), then click ' new file ' , then click ' file ' again and this time click 'sav...