how to make your first website
TRANSCRIPT
![Page 1: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/1.jpg)
How to make your first website
By Rachel Richardson
![Page 2: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/2.jpg)
Pick a text editor
Notepad
Notepad++
Dreamweaver
Visual Studio
![Page 3: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/3.jpg)
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>
![Page 4: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/4.jpg)
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
![Page 5: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/5.jpg)
Head - Example
…<head><meta charset="utf-8"><title>Put your title here</title>
<!----- CSS -----><link href="css/reset.css” rel="stylesheet"><link href="css/phone-default.css” rel="stylesheet">
<!---- JavaScript ----><script type="text/javascript" charset="utf-8">
$(window).load(function() { $('.flexslider').flexslider({animation: "slide",animationSpeed:
900,slideshowSpeed: 5000 }); });
</script></head>…
![Page 6: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/6.jpg)
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
![Page 7: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/7.jpg)
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>…
![Page 8: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/8.jpg)
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;
}
![Page 9: How to make your first website](https://reader035.vdocuments.site/reader035/viewer/2022072001/55d75bfabb61eb1b778b4622/html5/thumbnails/9.jpg)
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/