Search This Blog

Benjamin Philip. Theme images by Roofoo. Powered by Blogger.

Comments

Translate

Recent

The Basics of HTML

SHARE:

HTML tutorial

Purpose:
Introduce you to basic web page coding. This is a basic tutorial which
will prepare you for the use of more sophisticated HTML editing tools.

Importance:
Very few people code HTML by hand anymore. There are a multiplicity of programs such as DreamWeaver and Microsoft Front Page which help make the process of web page creation easier. BEFORE you learn to use hese tools, it is important to learn the basic structure and components of the code/language. This will come in handy when you need to troubleshoot code which editing tools can't fix.

Goals:
After this activity, you will be able to:
Build a basic text web page
Format and stylize your web page font
Add images to your web page
Add and control hyperlinks

 STEP 1: SETTING UP YOUR SERVER ACCOUNT TO HOST YOUR WEB FILES
You will be creating HTML (Hyper Text Markup Language) documents. These are the files/instructions a browser (i.e. Netscape/Internet Explorer) reads and uses to show web pages. In order to create your own home you need to place your HTML (Hyper Text Markup Language) documents in a world readable directory named "www" in your home directory (on your server account). This directory is automatically created for new accounts, so in most cases you should not need to create it.

STEP 2: MAKING THE "HTML" WEB FILES
HTML files are text files which contain the code of a web page. Today you will learn
how to program some basic HTML code. When beginning, it is best to use a simple text
editor such as notepad or emacs. You can open notepad in the following way:
1.  Click on the Start Button
2.  Click on Run
3.  Type in: notepad
4.  Press ENTER on the keyboard
The notepad window should pop up, if not, ask for help.

 STEP 3: LAYING OUT THE BASIC STRUCTURE OF THE PAGE
HTML files have a basic structure that you MUST work within. Before you begin the
tutorial you should type or copy/paste the following 8 lines from this screen into the text
file (file you have open in notepad):

<html>
<head>
<title>MY HOME PAGE NAME</title>
</head>
<body>
THIS IS WHERE THE CODE FOR BODY (WHAT YOU SEE IN
NETSCAPE/INTERNET EXPLORER) OF THE WEB PAGE GOES.
</body>
</html>


The text/bracket combinations are called tags. Note they come in pairs. There is always a beginning tag (<title>) and an end tag (</title>). The beginning tag signals Netscape / Internet Explorer that a new tag/task is starting. The end tag tells Netscape / Internet Explorer that the tag/task has ended. You will learn more about these in the tutorial. Save
the above file to the desk top of your computer as: home.html. Make sure to add the extension ".html" to the end of the file!!!!!

STEP 4: OPENING THE HTML FILE IN  NETSCAPE/INTERNET
EXPLORER

Now you can view the results of your work:
1.  Go to or open Netscape/Internet Explorer
2.  File > Open or Open Page
3.  Press the Choose or Browse button
4.  Browse to the desktop and double click on home.html
5.  Click Open/OK to load the file
If this did not work, ask for help.

 STEP 5: MAKING YOUR FILES READABLE ON THE WWW
To make your files accessible to the world (later on), you must store them in your server
account (You do not have to do right now, but you could ftp the file to the server if you
wanted) within the www file. Later on, you can use Emacs or other text editor on the
server to edit the home.html file.

STEP 6: USING NETSCAPE/INTERNET EXPLORER AND THE TEXT EDITOR TO UPDATE AND VIEW THE RESULTS

VERY IMPORTANT!!!!!

Instead of copying and pasting the text from the tutorial into the Netscape/Internet Explorer browser text window (as suggested in the "TRY IT YOURSELF SECTIONS!" of the tutorial), you should paste the code into your home.html (inside notepad) file.
You can then reload the file into Netscape/Internet Explorer to see the results:

1.  Select the text from the tutorial you wish to copy
2. Copy the text by pressing: Ctrl+C (the control and c key simultaneously)
3.  Switch to notepad
4.  Place the cursor where you want to paste the text
5.  Paste the text by pressing Ctrl+V
6.  Modify the text/code if you need to
7.  Save the file
8. Load the file into Netscape/Internet Explorer, OR if you are already viewing the

file in Netscape/Internet Explorer, press the reload (called refresh in Internet
Explorer) button to view the page with changes.
Use this procedure to obtain experience in using a text editor and Netscape / Internet
Explorer to write and debug your pages.

COMMENTS

Name

android,6,Arduino,4,Blogs,10,C Programming,26,Computer,18,Electronic,12,HTML,22,Mobile,13,NEWS W,2,PHP,8,Programming,1,Project,9,Tutorial,7,
ltr
item
GetYarn: The Basics of HTML
The Basics of HTML
HTML tutorial
GetYarn
https://getyarn.blogspot.com/2017/07/the-basics-of-html.html
https://getyarn.blogspot.com/
http://getyarn.blogspot.com/
http://getyarn.blogspot.com/2017/07/the-basics-of-html.html
true
6634423068030231660
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy