Tutorial: Introducing You! Creating a Page in HTML & CSS
1. Make a folder on your desktop and call it “yourname-myfirstpage”
2. Add a photo of yourself to the folder with the name “yourname-selfie.jpg”
3. Next, launch TextEdit, Notepad, Dreamweaver, or any other text editor you may have.
3a. If working in TextEdit:
● Go to the top-left of the screen and choose TextEdit – Preferences
● Under New Document choose “Plain Text”, and uncheck all of the options in the columns under options
● Under the tab Open and Save check the box Display HTML Files as HTML Code. And uncheck Add .TXT Extension, then click the red dot to close the window.
4. Create a new file in your text editor program.
5. Save your file as “firstname-lastname_myfirstpage.html” and store it in the folder you made in step #1.
Now that your document is set up, type the following code below, directly into the page and filling in the information about you. Substitute your content when prompted by the bold text.
You do not have to type the HTML comments (indicated by <!— —> and /* */) But if you are new to HTML & CSS, they are helpful to read to understand what each line of code means!
<!DOCTYPE html> <!–this indicates that the document we’re writing is based on HTML, specifically for us it is HTML5 –>
<html> <!–this is the start of the html document–>
<head> <!–this is the opening of the “head” section of the html document. This content is not visible in the browser window. This region is used for communicating with the browser about what languages and technologies will be used in the webpage.–>
<meta charset=”UTF-8”> <!– The charset of UTF-8 specifies the character encoding required for your language and alphabet –>
<title>Hello world, this is (Your Name’s) first page! </title> <!–The information between the <title> opening and </title> closing tags will serve as the page’s title text and will be visible at the top of the browser window, as the bookmark text and in the browser “tabs”. It’s also really important for SEO, so use meaningful terms here. –>
</head> <!–the closing of the “head” section of the html document–>
<body> <!–opens the section of your webpage that is visible in the browser window–>
<div id=”container”><!–opens a box (div) that makes a container around your content within the window; it is used for styling purposes only and the id is the special name we’ve given this particular box–>
<h1>Hi, my name is ___________! </h1> <!–This is wrapped in a Headline 1 tag to indicate it is the most important headline for the following content. When our pages are more robust, we’ll use a number of headlines throughout to help with scanability and SEO. –>
<img src=”yourname-selfie.jpg”>
<p> do not write this, but in this blank between the opening and closing P tags, tell us about what you ‘d like to do with your new & improved skills in web design </p> <!–paragraph tags separate out paragraph blocks of content – they are BLOCK LEVEL elements–>
<p> do not write this, but tell us about you! It can be anything you’d like to share. Ex: What’s your major, what brings you to CSUMB, etc etc. </p>
<p>do not write this, but instead, answer the following: what do you feel strongly about? Your<strong>family</strong>? A lifestyle? Music? Art? Sports?</p> <!—-Write a paragraph using the p tags, but then interrupt the paragraph by adding in the <strong> tags to isolate words that you want to be STRONGLY emphasized (and thus appear more bold). Use the tags to indicate important text. Add the strong tag in the middle of a paragraph to isolate only a word or phrase within the sentence. <strong> tags are INLINE ELEMENTS–>
<p><em>do not write this</em>, but instead tell us your favorite song. </p> <!–The words between the <em> tags are emphasized text and appear italicized. The <em> tag means that the text should be “read” in a different voice. Create a paragraph with the p tags and within the p, isolate a word or a phrase that you want to “emphasize” by enclosing it within the opening and closing <em> tags. <em> tags are INLINE ELEMENTS–>
<h2>I am <strong>SO</strong> excited to learn about Web Design & Development!</h2> <!–This is wrapped in a Headline 2 tag, the second most important headline. They are also BLOCK LEVEL elements.–>
<h3>The top three things I would like to learn in this club are:</h3>
<ol>
<li>enter highest priority</li>
<li>next highest priority</li>
<li>third highest priority</li>
</ol> <!–The list above is an Ordered List. The list items display as numbered/ordered to lend hierarchy. There is another list called an Unordered List, where the items come listed with bullets <ul>. Each list item is a BLOCK LEVEL element and uses <li> to separate each list item.–>
<p class=”letsGo”>I’m ready to get started!</p>
</div><!–this is the end of the box called “container”–>
</body><!–the end of the visible content on the web page–>
</html><!– the end of the html document–>
6. File – Save
7. Leave your Text Editor program and navigate to your desktop folder to find your file.
8. Right-click on the file and choose to open with Chrome or Firefox to see your page in a browser!
Now that you’ve seen it with plain HTML and without any CSS, let’s go back into the document and add a few lines of CSS directly into the HTML document – this is referred to as INTERNAL CSS as the CSS lives internally on the page – it’s not a common way to work, but that’s OK for us right now as we’re just getting some ideas as to how this works as a collection of technologies.
NOTE: you will add in colors by either hexadecimal or through CSS named colors. If you want to look some up to complete your page with unique colors, do a browser search for “CSS named colors” or “CSS hexadecimal colors” then reference the EXACT color names/values in your CSS document.
9. After the comment in the <head>, start a new line and then add in the following code:
<style>
body {background-color: rgba(14, 101, 127, 1.0); margin: 0px; color: #0E657F; font-family: verdana, trebuchet, arial, sans- serif;} /*sets the color of the page and the base font family & font color, and removes any internal margins from around the browser window*/
#container {background-color: white; width: 960px; margin: 0px auto;} /*makes the box white, gives it a width and centers it in the browser with the “auto” margin on L & R sides*/
h1 {font-size: 3.5em; font-family: Cambria, Times, “Times New Roman”, serif;}
img {width: 300px; float: right; margin-left: 25px;} /*floating makes elements sit side-by-side if they’re block-level*/
p {font-size: .9em; color: #00868b; line-height: 140%;} /*adding in line-height/leading for better readability*/
h2 {font-size: 1.8em; font-family: Cambria, Times, “Times New Roman”, serif; color: #ffa500;}
ol li {color: #20b2aa; margin-bottom: 10px;} /*spacing out the list items, only if they’re ordered list-items, though*/
h3 {font-size: 1.8em; font-family: Cambria, Times, “Times New Roman”, serif; color: #5d478b;}
.letsGo{font-size: 1.8em; color: #ffd561; text-transform: uppercase;} /*this rule effects anything that has a class=”letsGo” applied to the opening tag*/
</style>
10. Save this file again and load it into the browser to see the changes. As long as you can see everything, you’re finished!
11. Challenge: continue to modify your page by adding more HTML content or learning more on w3cschools.com about CSS to add more style to your page!
12. Take a screenshot of your final page and email it to cssmb@csumb.edu to share! Happy coding!