how to make your first website

How to make your first website

By Rachel Richardson

Pick a text editor

Notepad

Notepad++

Dreamweaver

Visual Studio

The Basic Structure – HTML5

<!doctype html><html><head><meta charset="utf-8"><title>Put your title here</title></head>

<body>This is where all your text goes for your

website.</body></html>

Head

There are two main parts of HTML, the head and the body.

The head is where all the “secret” stuff goes.

Your JavaScript links go here Your CSS links go here Favicon image

Head - Example

…<head><meta charset="utf-8"><title>Put your title here</title>

<link href="css/reset.css” rel="stylesheet"><link href="css/phone-default.css” rel="stylesheet">

<script type="text/javascript" charset="utf-8">

$(window).load(function() { $('.flexslider').flexslider({animation: "slide",animationSpeed:

900,slideshowSpeed: 5000 }); });

</script></head>…

Body

The body is what you see on the web page. Here are some tags you can use to edit your text

– but you do most of the styling with CSS: <h1>-<h6> : heading sizes <ul> : unordered list <ol> : ordered list <li> : list item <a> : anchor tag – used for links <strong> : makes text bold <em>: makes text italic <img> : how you add an image <br /> : add a break in your text <p> : paragraph

Body - Example…<body><h1>Welcome to my Website</h1><h3>This is a subtitle</h3>

<p>Here is some text on my paragraph. I love making websites. They are so fun!</p>

<img src=“put destination of image here” /><p>Here is my second paragraph. It is so much cooler than my first.</p><ul>

<li>First item in list</li><li>Second item in list</li><li>Third item in list</li>

</ul><p><strong>I am bold</strong><em>I am italic<em></p><a href=“http://google.com”>I am a link to google</a></body>…

Cascading Style Sheet - CSS

CSS is used to style your text and pictures on your web page.

Example:h1{

font-size: 10px;color: #00ff00;font-family: sans-serif;

}

p{color: red;padding: 5px;margin: .5px;

}

Conclusion

Making a website is really easy. You just need to learn all the tags, and different styles you can do in CSS. Once you have that down, you can start making your own websites like the pro’s!

For more information on making websites and how to get involved with web design visit these websites:

http://ezinearticles.com/?Do-I-Need-Responsive-Web-Design-for-My-Website%3F&id=8114631

http://idmaa.org/

http://thedarkknate.blogspot.com/

how to make your first website

Technology