Intro Tutorials - HTML and CSS

24 Pages·2015·10.471 MB·English

by  Dontae M Grose JR.

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,