Scribd
Upload
425 views6 pages

HTML and Css Tutorial

HTML and CSS Tutorial - Basic Introduction to get you started. Create a folder called Activity 8 for your work, followed by an html file in your IDE editor. The next two important elements to add to your html file are the "head" and "body" elements.

Uploaded by

api-116063228
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
425 views6 pages

HTML and Css Tutorial

HTML and CSS Tutorial - Basic Introduction to get you started. Create a folder called Activity 8 for your work, followed by an html file in your IDE editor. The next two important elements to add to your html file are the "head" and "body" elements.

Uploaded by

api-116063228
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

HTML

and CSS Tutorial Basic Introduction to get you started


1. Use an editor/Integrated Development Environment - IDE of your choice for this tutorial, otherwise download and install notepad++ from: http://notepad-plus-plus.org/ 2. Create a folder called Activity 8 for your work, followed by an html file in your IDE editor. Give the HTML file an appropriate name. 3. HTML source code consists of elements; an element in HTML is a loose term that describes each individual piece of your web page. An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag. 1. <p> - opening paragraph tag 2. Element Content - paragraph words 3. </p> - closing tag <html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Hence the next step is to put the HTML tags in your HTML file, which should look like this: <html> </html> If you generated this HTML file through an IDE- (Integrated development environment e.g netbeans or eclipse) then these tags should have been generated for you among a few others. You will also see some code at the top of the page which will describe some extra information about the HTML page, although this information is important, it is not necessary for this basic tutorial, however if you want to research this further then look at this as a starting point after completing this tutorial: http://en.wikipedia.org/wiki/Document_Type_Definition

4. The next two important elements to add to your HTML file are the head and body elements, your HTML file should look like this now:
<html> <head> </head> <body> </body> </html>

The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. Other elements (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next. The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content. 4. Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Below is the html code:
<html> <head> <title>My Title</title> </head> <body> </body> </html>

5. Lets create a heading using the h2 tag, this will display a title heading for our main page. Heading tags range from h1 to h6. Experiment with different ones or add multiple headings to code. <html> <head> <title>My Title</title> </head> <body> <h1>My h1 Heading</h1> <h2>My h2 Heading</h2> </body> </html> At this point if you navigate to the folder youve created and launch your HTML file, it should open in your web browser by default. If this doesnt happen right click and Open With a web browser of your choice. You should see a blank page with your title and headings in the browser. Play around and experiment with the different heading tags. 6. An example of break-line tag </br>. To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type <br>linebreak</br>. Try the following code with and without the </br> tags and see the difference when you open the HTML page in a browser. The <p> element, is simply for a paragraph. <html> <head> <title>My Title</title> </head> <body> <h1>My h1 Heading</h1> <h2>My h2 Heading</h2> <p> This is my first sentence.</br> This is my second sentence.</br> This is my third sentence.</br> </p> </body> </html> You should be able to see changes by refreshing the page in your browser, just make sure to save the changes before refreshing your browser.

7. Download a image and save it in your folder, lets try adding the image to your HTML file. <html> <head> <title>My Title</title> </head> <body> <h1>My h1 Heading</h1> <h2>My h2 Heading</h2> <p> This is my first sentence.</br> This is my second sentence.</br> This is my third sentence.</br> </p> <h2>My Image</h2> <img src="image.jpg" /> </body> </html> 8. This was a very basic introduction to HTML, there are many more things that you can investigate, I recommend looking at and going through:

http://www.w3schools.com/html/default.asp The next step is to introduce CSS.


9.

Cascading Style Sheets (CSS) are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to:

Add new looks to your old HTML Completely restyle a web site with only a few changes to your CSS code Use the "style" you create on any webpage you wish!

A stylesheet can, and should be completely separate from your HTML documents. When you have mastered CSS and HTML, you will be able to separate your web site's design and formatting (CSS) from the content (HTML).

Now create 2 new files in your editor and in the same folder, and save one as Spring.css, and the other as Wobbly.css Copy the code over from the following two links: http://staffnet.kingston.ac.uk/~ku33185/ToolBox/spring.css http://staffnet.kingston.ac.uk/~ku33185/ToolBox/wobbly.css

10. Now link your Spring.css style sheet to your HTML file:
<html> <head> <title>My Title</title> <link rel="stylesheet" type="text/css" href="Spring.css" /> </head> <body> <h1>My h1 Heading</h1> <h2>My h2 Heading</h2> <p> This is my first sentence.</br> This is my second sentence.</br> This is my third sentence.</br> </p> <h2>My Image</h2> <img src="image.jpg" /> </body> </html> Now try changing the href="Spring.css" above to href="Wobbly.css" and reload the page to see the difference. Now if you look at the code in the Spring.css style sheet you can see that it is describing features of the h1, h2, h3, and h4 tags, as well as the body. Features such as font, colour centering. This was a very brief introduction, now go look at CSS tutorials online, such as: http://www.w3schools.com/css/default.asp also experiment with making changes to the style sheet.

Example

<html> <head> <title>My new webpage</title> <link rel="stylesheet" type="text/css" href="Spring.css"/> </head> <body> <h1>My new heading 1</h1> <h2>my new heading 2</h2> <p> this is my first sentence </br> this is my second sentence </br> this is my third sentence </br> </p> <h2>mosdef</h2> <img src="mosdef.jpg"/> <h3>jay elctronica video</h3> <iframe width="560" height="315" src="http://www.youtube.com/embed/dPO5L5mTM9o" frameborder="0" allowfullscreen></iframe> </br> </br> <iframe width="420" height="315" src="http://www.youtube.com/embed/qPRl0LzD_MA" frameborder="0" allowfullscreen></iframe> <h4>Order List</h4> <ol> <li> hello this is a test</li> <li> hello this is a test</li> <li> hello this is a test</li> </ol> </body> </html>

You might also like