Web Design/Basic HTML and CSS Tutorial
< Web Design|
Web Design → Basic HTML and CSS Tutorial
|
HTML stands for Hypertext Markup Language and is composed of many things called tags. An example of a tag is <tag>. Tags are used to tell a browser how to format text, mark different areas, and other thing. However, more recently many HTML formatting tags such as the <font> tag have been removed from HTML in favour of CSS. CSS stands for Cascading Style Sheets. We will go over that later in this chapter.
Basic HTML
|
Ok, so you are ready to start making a simple website. Alright then let's start: There are two kinds of tags, a beginning tag <tag> and an end tag </tag>. Now that you know that we can start your first web document. Load up your HTML Editor. The screenshot examples are up CSE HTML Validator lite v6.52. The first tag you need is a beginning <html> tag. This tells your browser that this is an HTML document. Next you will need a beginning <head> tag. This marks the head of your document. In the head exists many elements many of which you will learn more about later in this Wikibook. |
| One of the things that is in the head is the title. The title is what appears at the top of your browser. A title is very important and should describe in as few words as possible the content of your page. To make a title you should add a <title> tag followed by the text you want to use as a title and then a </title> tag to close it off. |
Now you have to close the head of you document. That's right you need to add a </head> tag. Now you need to create a body. The body is where the content that the browser displays exists. To make it you need a <body> tag. Now we need to close our body and end the HTML Document and a </body> then a </html> tag to your document. Now between the <body> tags type some text and save your document. When you save you document save it as "index.html". Now that it is saved load up you HTML file in a browser.
There you have created a web page. Go pat yourself on the back. It may not be much yet but you will learn more in the next chapter.
Basic CSS
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, CSS3 Animations
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, HTML, AJAX, CSS, JavaScript, PHP, XML, Information Architecture, Algorithms
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 Website Qualifications in Australia, Australian Qualifications, Web design qualifications
Professional development: 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