Web Design/Advanced HTML Tutorial
From Wikiversity
|
Web Design → Advanced HTML Tutorial
|
Now that you have completed your first HTML page lets move on to some advanced HTML. Lets start off with Headers.
|
Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 |
Headers are text that is formatted in the style of headers just like you would find in a report. There are six levels of header with <h1> being the biggest and <h6> being the smallest. To create headers simply surround an area of text with a begining and ending header tag. Header tags are very useful. However, if you want normal text then you should use a paragraph tag <p>. Paragraph tags again do exactly as their name suggests. They format your text as a paragraph. To use them all you have to do is surround an area of text with a <p> and a </p>. Ok so you have lots of nicely formatted text, but you want some images. Well let's do that then. |
To add images to your web documents you need to use the image tag. Unlike other tags however, the image tag has no end tag. In order to use the image tag we will have to go over attributes. Attributes are subsections that get added to a beginning tag to add functionality. Attributes DO NOT get added to end tags.
Insert the <img> tag where you want your image to go. Now in the tag add the "src" attrubute and specify the path to the image file on the server (or local directory) that your document is on. Eg. <img src="images/image.gif>. True HTML 4.01 requires that the image tag also have height, width, and alt, attributes. But what do these do?
The height and width attributes specify the size of your image. Most browsers will determine this on their own but specifying them allows for faster download times. You can also change the values to something other than the original dimensions of the image. This, however, will NOT change the size of the file. You can even distort images by only changing 1 dimension.
The alt attribute specifies the alternative text that comes up if the image can't be displayed. You would be surprised how often this is needed. If an image get corrupted, deleted, or moved without changing the path a graphical browser can't display it and instead will attempt to use alternative text. There are many text-only browsers that can ONLY display alternative text for images as well. A common example is Lynx. Alternative text should either say the text on an image or describe the image. E.g. An image that links to a downloads page says "Downloads" the alternative text should say "downloads" as well. E.g.(2) An image of a cat has no text should have alternative text that describes the cat.
[edit] Making your pages HTML 4.01 complant according to W3C specification
In this section we will talk about how to keep you web documents compliant with HTML 4.01.
[edit] Doctype Specification
One requiement to HTML 4.01 is the doctype tag. This tag is placed above the <html> tag and HAS NO end tag. CSE HTML Validator can insert this for you.
[edit] External Resources
Iwebslog HTML Guide- Iwebslog
Iwebslog Web-Design Guide- Iwebslog Blog
HTML: What is HTML, Advanced HTML Tutorial, HTML Challenges, Lists and Tables, The Structure of HTML, Pen and Paper HTML activities
CSS: Learning Basic HTML and CSS, CSS challenges, Embedded CSS, Basic HTML and CSS Tutorial, Inline CSS, Develop cascading style sheets
PHP: Simple functions in PHP, Dynamic websites, PHP challenges, Dynamic websites with PHP, Generating a receipt with PHP, Responding to HTML forms with PHP,
Javascript: An Introduction to Programming with Javascript, JavaScript Challenges, Getting to know Javascript events, Getting to know the Document Object Model with Javascript, JavaScript pen-n-paper activities, Web Programming Intro, Produce basic client side script for dynamic web pages
XML: XML challenges
Databases: Creating Database Tables
Projects: A small website project, A step-by-step web design project, Build a basic web page, Build a small website
Challenges: Web design challenges, HTML Challenges, AJAX Challenges, CSS challenges, JavaScript Challenges, PHP challenges, XML challenges, Information Architecture Challenges, Introductory algorithm challenges
Activities: Web design group learning activities, Pen and Paper HTML activities, A Web Design Quiz show, Ordering Tasks for a Web Project, Paired Bio Pages, Scoping a Small Project, Emerging Technologies Research Activities
Project management: An introduction to Project Management, Developing a Client Project
Design: Accessibility, Design Principles for Web Design, Design Suggestions
Testing: Testing Website performance, Website Performance Test Plan
Publishing: Getting Your Site On the Web
Certification and standards: Cert IV Websites Qualification in Australia, Australian Qualifications, Web design qualifications
Professional development: Developing your online portfolio, Contribute to personal skill development and learning, Useful Applications, Useful Books, Emerging Technologies, Using the Internet as a Learning Tool
Course meta-information: Web design, About the web design learning project, New Structure, Sample Timetable
