Author: Dontae M. Grose Jr.
Intro Tutorials
Creating webpages can be a hard, but with this quick and easy tutorial I will show you how to become a web designer. You will learn how to use
html and css, which are web designing languages that are used all over the web, from Google to YouTube everyone uses html and css to build
their websites. You will also learn about how these two languages are used together to make a complete and dynamic webpage. An important
thing to remember throughout this tutorial is to really understand how this code is implemented.
Now getting straight to the point, HTML (Hyper-text Markup Language) is a web developing language that is used to display content onto a web
browser. Your internet browser is pre-programmed to understand the html code and know what it is you are telling it to do with it.
CSS (Cascading style sheets) is an extension to html and although they are different web languages, they coincide with the browser to create a
dynamic webpage.
Downloading Notepad ++
To start writing you code you will need to have an environment to write your code inside of. The best free code editor to use for writing html and
css code is Notepad++. This is what I will be using throughout this tutorial. Don’t worry the software is easy to learn and use.
Steps to downloading Notepad++
1. Go to https://www.notepad-plus-plus.org
2. Click download
3. Follow the on screen directions
4. As of late 2014 the newest version of notepad++ can be downloaded at:
https://notepad-plus-plus.org/download/v6.6.9html.
5. Once you have notepad++ downloaded you want to open it. You should see a screen like this:
This is the interface that all of your web developing will be done on.
Setting up Files
So when you have notepad++ open you will see that it looks like a regular note pad, just with a lot of more buttons. On the top of the program you
will see a menu bar:
On the menu bar there are only 2 categories that we will be using to create our full website. The “file” category and the “Run” category. You can
see that by clicking the “file” button, we get options like “new” which is used to open a new window of text and “open” which is used to open an
existing file on your computer that you have previously saved.
All html documents need to be saves as (.html) files. This is because .html is a file extension, which tells the internet browser that you will be
loading a webpage written in html code or hyper-text mark-up language.
To save your file as an html file you want to click “file” and then “save as...”. Or you can just click “ctrl”, “alt”, and “s” to save a new file and “ctrl” + “s”
to save an existing file. Give your file any name you want, but use the .html extension after it.
Example:
myWebsite.html
I would recommend to create a folder for your file to be saved to. This will make it easier overtime for you to handle and manage your files.
You can see that I created a name for my website html file and then simply added the .html extension directly after. Now I also could have clicked
at the bottom of the window were it says (save as type:) and then scrolled down to where it says (“Hypertext Markup Language ”) and just clicked
that. Either way will get the job done.
Once you have your file saved you are about ready to start writing your website. Next open a new window in notepad++ that is empty by clicking
“file” and “new”. Then save it as a css file by using the .css file extension.
Example:
Stylesheet.css
This is the cascading style sheet extension and must be used on every css file just as the html files must also have their extensions attached to the
name of the file. CSS is used to bring customization to your website. Okay now you should have two pages on your notepad++ interface; one with
an .html extension and one with a .css extension.
Interaction
To get a bigger picture of how a text editor can work with the web browser to create a website, type your name or anything into your blank html file
and then at the top of notepad++ click “run” and select the web browser you wish to run it in.
Hint: If you do not save your code every time it is modified you will not get the updated version of your webpage when you are running your code.
An easy way to know if your file is saved or not is to check on the tab area at the top of the screen where you see the names of your files. You will
see an indicator that is either red or blue. It should appear right next to your name of the website. If it’s red, you need to save your code, and if its
blue that means that the code has been updated and saved. A quick way to save your code is by using (Ctrl+s).
Not saved:
Saved:
After typing text into your html file, saving, and clicking “run” in the ribbon of your notepad++ screen you will be able to see that the text has now
opened up onto your web browser screen.
View in notepad++
View in web browser
Layout of an html file
The layout of an html file is placed in basically the same format every time your create an html page. Delete the existing code that is in your html
file and type in the following code.
This is the basic outlay of every html website that is made. Here is the breakdown of the code above.
Line 1: <html lang=”en”> , this command tells your compiler that you are simply writing your code in the English language. That is all you will
need to know about this command. Just remember not to forget it when creating any website.
Line 2: <html> , is telling the compiler that you are starting the html part of your file.
Note: In html there are opening and closing tags for almost every command that is in the html language. Opening tags appear inside greater than
and less than symbols <> and closing tags appear in a greater than and less than symbol with a forward slash inside (before the closing tag name
is declared </>.
Opening and closing tags for and html command are <html> (representing the opening tag)and </html> as the closing tag. And since we are
writing html code we have to cover the whole script in these tags (with all other html elements inside these tags).
Line 3: <head> , stands for the header, and is used just to give the file some declarations of how the outlay should interact and what
parameters to use. But for the most part the header isn’t used much. So the commands in it will almost always stay the same.
Line 4: <meta charset=”utf-8” /> , this is a type of character encoding that will always need to be displayed on the inside of your header.
Line 5: <title> New Website </title> , this is where you give your website a name that will appear on the opening tab of your browser.
Line 6: </head> , represents the end of your header.
Line 7: <body> , This is where all of the html code you learn will be written. It contains all of the important aspects of your website, include
the photos, text, videos, music, links, and all other kinds of attachments and inputs.
Line 8-11: Blank space or blank lines in your text editor will not be detected as anything to your browser of text editor, as long as you do not
abnormally space your code, you will be fine adding spaces between chunks of code to be able to identify the functions easier.
Line 12: </body>, is the ending of the body.
Line 13: is the end of the html file </html>
You can see that I closed the body tag before I closed the html tag. That is because you must have all your html files in order for your website to run
and identify objects properly. This can be a big problem when you are working with a lot of code at once, but practice will help, and reviewing your
code will come natural as your learn how it works.
Comments
You can write comments on your code editor by writing the comment command like this:
Here you can see that there are 3 comments, they are made by using the tag:
<!-- -->
Comments are used to make references in your code; they do not affect the integrity of the actual webpage, and will not display anywhere but in
your text editor. You can also treat the <! --, start of the comment as the starting tag for a comment and use the --> as the closing tag of a comment
so that you can spread your comment throughout multiple lines or however you may want it to be.
Content
When it comes to adding content to your webpage you will have to 1) keep in mind that you can only write your code in the body and 2) remember
that there are opening and closing tags for all declarations and they must be in order when using multiple tags in one line or object.
The simplestthings displayed onto a webpage is usually the text. As you can image adding text to a webpage cannot be that hard. To display
normal text we use the paragraph command <p> </p>. To add a title to your paragraph or anything on your website we use the <h1> <h6>
opening and closing tags. Make sure you enter your title above the paragraph so it looks like a title on your webpage.
With the <h1> tag you will get the biggest form of the header title, if you want the title text to get smaller use bigger numbers in the heading title
command.
Example:
<h2>, <h3>, <h4>, <h5>, <h6>
The smallest being <h6>.
Text Styling
There are many different tags that are available when it comes to changing the way your text is viewed on your webpage.
<p> Used to make paragraphs
<i> Is wrapped around text to make it italics
<li> Used to make list of items with bullets
<ul> Used to make unordered lists with no bullets
<ol> Used to make ordered list
<em> Also will create italics
<br> (Doesn’t need a closing tag) and is used to create a line break or indent.
<b> Used to make text bold
<small>Makes text small
<big> Makes text big
<!-- -- > Comments
<sup> Superscripts words and numbers
<sub> Subscripts words and numbers
<mark> Makes text appear highlighted
<q> Writes quotations around words or phrases
Example of multiple tags being used together,
You can see that I kept all of my tags in order and you can see that I also used a command to change the background color of the website.
<body bgcolor=”green”>
This tag doesn’t require an ending tag since it is a strict declaration, and we can write any color inside the parentheses to change the overall color
of the website.
You can also use hex color values to change the color to something more unique. Hex color values are six digit numbers preceded by a (#) hash
mark, or the number symbol. These hex color values are used to identify many different blended and unique colors.
Hint: The hex color values must be entered with the hash mark for the property to be understood.
Example:
<body bgcolor=“#FFFFFF”>
All color values (hex or English) must be written inside of parentheses.
You can change the font color by using the tag:
<font color=“#000000”> Example </font>
The text of the color that is being changed is inside the <font> tags and will be changed according to its hex color value or English text color. Here
the text “Example” would appear in a web browser as black. Because #000000 is black in hex color values.
Links
Links on your website will be widely used to link people to different parts of your site and to reference people to other sites if needed. For
example, if I wanted to link people that visit my website to my favorite search engine (Google), I simple would use the link command and the link of
the website.
<a href=”https://www.google.com> Google </a>
The (<a href) part of the code is used to tell the browser that we have a hyperlink reference to be initialized. After that we add the link of the
website inside parentheses and then give the link a name that will show up on your web browser in blue and underlined (unless the font color is
changed).
We can also link items that are on our personal computers by giving the location of a file on your computer the same way that we did the website.
So say we wanted to make links to different parts of our webpage and I wanted them to be accessible to others fairly easy. This is used by most
websites so that people can navigate through there webpages easier, and is called a header. The header contains the home link as well as all of
your side links.
To be able to securely link a file, it is always best to have the file in the same folder as your website. In other words keep all the files you want on
your website, inside a specific folder.
So you can see that my .html document or my homepage for my website is inside a folder and its name is “mywebsite”. So all I have to do is to
link my homepage (without forgetting the extension):
<a href=“mywebsite.html”>Website Homepage </a>
You can also link images using a similar method.
<img src=“SpaceHD.jpg”>
The file type to the right in the picture where it says “JPEG Image” is how we find out what type of file the image is. JPEG images use the .jpg
extension. The other types of files types for pictures may vary depending on where you got the picture from. To know what you file extension is for
a photo, right click the photo, Click “properties”, and then look the “type of file:”. Images of other types are (.TIF, .PNG, and .GIF). You can also
change the type of files you are using by right clicking on the image you want to save and when the window opens, (on a windows pc), under
where you enter the name of the file you will see it says “Save as Type”, Click on the dropdown list and choose the file type that you want to use.
where you enter the name of the file you will see it says “Save as Type”, Click on the dropdown list and choose the file type that you want to use.
Once you have an imaged loaded, you might realize that the image is either way to big or way too small. (If your image file appears to be
corrupted, review your code or download a new image). This is because you have not set a value for the width and height of the image. To do this
we are going to need to use our .css file. But in order for the browser to know we want to style our image using css there are few things we have
to do.
First we have to tell our html file where our css file is. This is one of the only times where you will have to make changes to your <head> class of
your code. Go between your header tags and type in the following:
<link rel=”stylesheet” href=”HomepageStyle.css” >
Assuming that you named your css file “HomepageStyle”, if you gave it another name, go ahead and rename your hyperlink reference
accordingly. Capitalization must be accounted for when doing anything in programming; just something to keep in mind. Once you have this
command in, your css file is ready and will now link the html page when the script is ran.
The first thing we want to do is make our image smaller. Now, when we want to change the property of a specific item such as a picture we have
to add an i.d or a class to the object that you want to change.
Example of an I.D:
<img source=”SpaceHD.jpg” id=”Image1”>
I.d’s don’t change how a file appears, they simply give a name to an item, so that your css file can call it using that name. The names must be
distinct when you’re using i.ds so that the css file doesn’t get confused, don’t use the same name more than once. Instead of id’s it is also okay to
use class’s to identify different objects. We use the class attribute in html as:
<img src=”SpaceHD.jpg” class=”MyImage”>
Id’s in a css file are called in css using the hash mark or the number symbol (#). In my examples I will be using the ID version to identify my objects
as I just see it as a cleaner way to code. Classes are declared in css use a dot separator (.). Both of the methods are equally similar so It doesn’t
matter which one you would like to use.
Or
.MyImage {} , this is what I would use is css to call the class above.
After giving my image the id attribute and name it “myimage” I can now call it in css. We do this with the hash mark and the objects i.d name
followed by a pair of braces {} .The braces are used to surround all of the commands that will be given to an object.
Here are the attributes that we will be using to position and size an image the the length and width that you would like it to appear. Along with other
attributes that give you more room to customize and position the image accordingly.
On this css file there are 8 different attributes that are applied on the image. But in order to understand how the code coincides with the image,
you will have to understand what the properties do and the interaction between them. While most of the commands are easy to understand, but
you may have difficulty understanding the others. So it’s always best to enter the code into your web browser.
Height and Width
The height properties is used on objects only, both height and width are measured in pixels, which are tiny little dots that are projected onto your
screen. Which can take a second to get used to, but is useful when you need to precisely position something.
The other way that we can measure height and width is through percentages. Which as you probably could guess, the whole screen left to right is
100% and the screen top to bottom is 100%.
You can choose which method works for you best, by practicing that various techniques. I personally use both depending on the object and where
it is located on the webpage and the type of positioning that it may need.
Positioning
Line 4, 5, and 6 are used to position the image. (Top: 300px ;) means that the objects will be 300px from the top of the web layout screen.
Likewise, line 5 and 6 apply with the same laws. The left attribute in my example shows that we indented 0px from the left side of the webpage
meaning that the object will appear at the start of the left side of the webpage (with no indent). And so on with the left and bottom properties.
The margin indents on the outer-boarder of an object. The tag for margin is (margin: 0px ;) in this example we have no margin. Margins
are useful when making paragraphs or text appear inside a box.
Note: You can also use border tags on other items as long as they are using the id or class tag. By calling them in css, you can add numerous
properties. To make text appear in a box, give it a border. You can also give that border a shadow by using the (box-shadow: 5px 5px 5px;)tag in
css.
Padding is the css command in line 8. The padding is used to indent on the area inside of the elements border. This is usually set to 0px, but can
be used in special circumstances to create more room between and text and its border and any other object with a border.
The css position command is used to set an object to a specific style. In line 9, I positioned the image as an “absolute” value. This means that the
image will not move.
Example:
If you were to scroll down the website the image would disappear; until you scrolled back up to its original position. But there are other positioning
tags like (position: fixed ;) which will remain on the screen even when you scroll down the page.
Other positioning tags:
Position: Initial;
Position: Relative;
Position: inherit;
The key to positioning things right is to remember the height the width of the objects that you have already created and gave properties to.
Because if you don’t it will become difficult to manage your website and objects may begin to conflict with one another.
Input Types
Input has to be submitted into a form. To create a form we use the opening and closing form tags,
<form> </form>
Input is used for dynamic webpage items such as videos, usernames, passwords, and buttons.
Input text field
For this text input type, it allows a user to input any text they want into a box. Much like the email login box on your email server.
You can see the code editor here:
You can see the text box here:
Input password type
Input password type will hide the characters that are entered into the textbox. Just as it does in a normal password box.
Submit Buttons
In order to create a submit button you have to use the input type “submit”; but you also have to assign the button a name. The name will appear on
the button. This is done by using the “value” attribute and setting it equal to any string of text.
You can see that there are a couple of new attributes in the css sheet:
text align
font size
border radius
z-index
Text-align is used to align your text to a certain part of the screen. You can use the commands, left, center, and right to align your text within an
element or on the background of the webpage.
Font size is used measured in points (pt), can be attributed to a font or element to adapt the font to a certain size.
Border-radius is measured in pixels and is used to make the border of an element rounded and not have pointed edges. Z-index is used to layer
items. We can layer things by giving a z-index to different elements. So if I have two elements and one is text and the other a textbox and I want the
text to be in the background of the textbox; then I give the text a low z-index and the textbox a higher z-index.
Video and Audio
Adding videos to your webpage is useful when you have a v-log or a YouTube channel and want to display the content on your webpage. To do
this the video tag element:
<video controls>
<source src=”movie.mp4” type=”video/mp4”>
</video>
The video type mostly reflects what kind of file you are using, for example, here I am using an mp4 video, so the video type is set to video/mp4.
You can also use height and width attributes to align and position your video on your website.
<video height=“240px” width=“300px” controls>
<source src=“movie.mp4” type=“video/mp4”>
</video>
Audio files can be added using a similar method.
<audio controls>
<source src=“music.mp3” type=”audio/mp3”>
</audio>
