Intro to HTML, CSS and JavaScript Part 1: HTML

 

 

This tutorial is designed to give you a super quick crash course in HTML and CSS so that you can make a simple web interface.  For more in-depth information check out the tutorials on www.w3schools.com. 

 

 

Background:

HTML (Hyper Text Markup Language) is the framework of a web page.  It is almost as old as the internet itself and is so portable that it can be interpreted by almost anything with a screen.  The language consists of “tags” which describe the content of a document.

 

Tags are indicated by these symbols:  <tagName>.  Examples:  <h1>, <head> <p>

Tags usually come in pairs like <h1> Intro to HTML </h1> , the first is the start tag the second is the end tag (note the /).

 

CSS (Cascading Style Sheet) is usually a separate file that goes along with the html page.  Its job is to apply styles to the content of the html page.  For example: Text size, colour and font.

 

JavaScript is a programming language that can be understood by web browsers.  It is special for two reasons:

1.      It can be run by any computer, smart phone or tablet that has a web browser.

2.      Small chunks of code and be easily included in an html page using the <script> tag. 

 

A Simple HTML Document

Test the code by:

·        Pasting into Notepad (or another text editor, not Word)

·        Save it as demo.html

·        Open it with  a web browser

 

<!DOCTYPE html>

 

<html>

 

<body>

 

<h1>My First Heading</h1>

 

<p>My first paragraph.</p>

 

</body>

</html>

Tells the browser this is an html file

 

Start of the html document

 

 

Start of the main part of the page

 

H1 (heading 1) is usually the biggest text on the page. (note h2, h3 and h4 all get smaller)

P stands for paragraph.   This is usually the smallest text on the page.

Other Tags You Will Need

 

<!--   Tony Made This  -->

 

This is a comment.  Use this to include your name or leave yourself notes in your code.  Note: There is no “!” on the end tag.

<head>

</head>

 

The head section is where you set up important things that describe your whole document like which CSS page you are using.  (Coming up )

 

Note: it goes right under the first <html> tag before the <body>

 

<br>

This adds a newline to the document.

<a href=”http://www.link.com”> Link Text </a>

<a href> is how you add a hyperlink. Note that the link goes in quotes inside the start tag.

 

Make sure you include the http if you want to access another web site.   If it is a local file you just put its name.

 

<button type=“button”>Button Text</button>

You can use text or pictures to make your buttons have meaning. Each web browser has some say about how your button looks and acts.

 

You can embed other tags to make you text look different or add a link.

 

<script>

</script>

This tag tells the browser to start running your javascript code.

This is a very limited list of tags. 

For a complete list check out  http://www.w3schools.com/tags/default.asp If you come across a tag you think I should add to this list let me know!

 

Try This:

 

Use Notepad make a simple html document that has these elements:

·        A heading 1 that says “My Pet Alligator” 

 

·        A paragraph that says “I have a pet alligator. His name is Allan.  He eats mostly chickens.”

 

·        A button that says “Feed Allan”

 

·         A button that says “Don’t” using the <h1> tag