Introduction to the Course
Welcome to the Idiot's Guide to Modern Web Design. This 12 part course will take you from run-of-the-mill idiot to web design rock god!
The History of HTML
Tim Berners-Lee, along with colleagues from CERN, developed HTML as the publishing format of the World Wide Web in 1990, based on the basics of hypertext proposed by Vannevar Bush in 1945. HTML is transferred over HTTP (HyperText Transfer Protocol) and each page is identified uniquely by its URL (Universal Resource Locator); both were created by Tim Berners-Lee. The first version of HTML was officially published in 1993. Now the W3C (World Wide Web Consortium), directed by Tim Berners-Lee, defines the technical standards for HTML, now in its 5th version.
Introduction to Web Design
Web Design consists of 3 main languages:
- HTML (HyperText Mark-up Language) is the building blocks of a webpage. Everything you see on a webpage is built of HTML.
- CSS (Cascading Style Sheet) is the paint and make-up of web design.
- JavaScript - the programming language of the web. You can use it to do almost anything. (Like making a calculator, for instance)
If you were building a house, HTML will be the walls and roof, CSS the paint and JavaScript the voice that greets you by name as you enter the front door.
The Basics
The Right Tool for The Job?
You can do web design with a wide range of tools, from costing nothing to hundreds of dollars. There are 3 types.
- WYSIWYG (What You See Is What You Get)- is a drag and drop visual editor. You will seldom come into contact with the HTML underneath.
- Text/Code Editors - Plain old Notepad or Notepad++. You will need to type everything out. The latter has code folding, syntax (keyword) highlighting and auto-completion. This may be frustrating at times, but using this method gives you the ultimate control over the final product. Notepad++ for Windows is free (as in free speech or free beer) You can download it here.
- Professional Editors - This includes tools like Adobe Dreamweaver or Microsoft Visual Studio. It has both a code editor as well as a WYSIYYG built in. Features like site management, FTP and Advanced auto-completion come standard. There is also a free version of Visual Studio's Web Developer Tools called Visual Web Developer Express Edition. Some of the more professional tools are not available(you won't notice it) but it might be a good place to start. You can download it from here.
A Lesson in Document Formats
HTML documents are based on XML (eXtensible Markup Language) that uses human readable tags and attributes. Tags can also be nestled (like a folder in a folder)
The tag some_name will open with <some_name> and close with </some_name> . Attributes are properties that are given to a certain tag. If the tag some_name needed the colour property to blue then it would look like this:<some_name color="blue"> </some_name>
Basic HTML Structure
All modern HTML documents will contain this structure:
<!Doctype html>
<head>
</head>
<body>
</body>
</html>
Now the explanation:
<!Doctype html> - this tells the browser that this document is HTML. The Doctype tells it which version of HTML to try and read. To use the latest version, HTML5, we just type it like that. HTML 4 has 3 different Doctypes, but we won't worry about that.
<head> - this is where everything that is not HTML is loaded. Things like Scripts and CSS. Also, information about the page, like title and author information is kept here. Later we will load CSS inside the head, but for now just leave it blank.
<body> - is where the magic happens. Everything inside the body will be shown to the user.
Body Basics
There are some things essential for a good <body>
Headings
Headings are pre-defined styles (font, colour, size etc.) They are numbered from <h1> (biggest) to <h6> (smallest). It is possible to customise these pre-defined styles with CSS, but that we will look at later.
This is how to use them:
<h1>Put your text here</h1>
Paragraphs
Paragraphs is the pre-defined style for, well, paragraphs. This style can also be customised with CSS.
This is how to you them:
<p>Insert paragraph text here</p>
You're on Your Own Now!
Not really! But it is time for your first webpage!
Open your chosen editor. Here are instructions for both Notepad and Notepad++.
Notepad
- Open Notepad (by going Start -> All Programs -> Accessories -> Notepad)
- Type the following HTML in
- When you are finished, go File -> Save As
- Type in the name followed by .html (All HTML documents are saved as .html)
- Click Save
- To edit it later, just go to the file and Right Click -> Edit or Right Click -> Open With -> Notepad
Notepad++
- Open Notepad++
- Click Language -> H -> HTML
- Type the following HTML in
- When you are finished, go File -> Save As
- Type in a name and click save.
- To edit later, just go to the file and Right Click -> Open With -> Notepad++
The Code
Here is the code for your first webpage!
<!doctype html>
<head>
<title>My First Page!</title>
</head>
<body>
<h1>My First Page! (H1) </h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6>
<p>This is a long winding paragraph. We normally use Iorem Ipsum to fill the space. I use lipsum.com to generate my Lorem Ipsum. There is a nice write-up on their website if you are interested where it began. Just copy the next bit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam mi leo, tempor et libero a, bibendum luctus quam. Etiam ut ligula ut eros ultricies luctus. Suspendisse sapien leo, pharetra quis nisl sit amet, consectetur dignissim augue. Sed facilisis semper purus vel facilisis. Ut hendrerit porta cursus. Vestibulum vitae lorem magna. Nunc congue arcu dui, sed semper lectus varius eget. Vestibulum pharetra elementum mattis. Vestibulum iaculis urna vel viverra adipiscing. Donec condimentum interdum ligula, id dapibus turpis lacinia non. Praesent in eros semper, tristique urna vitae, volutpat eros.</p>
</body>
</html>
Opening the Page & Finishing the Part
To view your webpage, just double-click on the file in Explorer.
There you go - your first webpage! Don't try to brag though, everybody will look at you very unimpressed. Only those that have done it themselves will understand what pride you have. ;)
See you in Part 2!
jACQUES
History & Notes
v1 - Original Released for The HTML5 & CSS3 Tutorial Competition
Note: Because of the nature of the competition, I might not be able to finish both articles in the week. So the next part published might not be the next in the series. However, I will keep a record of the criteria for the missed articles and they will all hopefully be completed by 1 July 2014. Sorry for the inconvenience.
