Create a Personal Webpage!

This lab provides directions to help you to create your own personal webpage using HTML. HTML stands for Hyper Text Markup Language. Our objectives include the following:

  1. Find the appropriate location to create your webpage
  2. Create a personalized webpage using notepad
  3. Use HTML tags to further beautify the webpage

Create Your First Webpage

  1. Choose a folder for your webpage.
    • If you want your webpage visible to others, from a Windows computer in the lab, open My Computer and go to U:\public\html and save all html files there.
    • If you want to create a webpage just visible on your computer then make a folder/directory, such as MyWebPage, and save all the html files there.
  2. Now let’s create a simple webpage. The first step is to open notepad (Click start and search for notepad). Once it opens type the following HTML inside. 
    <html> 
This is my first webpage!!!
</html>
  3. Now let’s save the html document. Click on File (in the menu bar) and Save As. Select the folder you chose above, name the file index.html and change the Save as type to “All Files” as shown in the figure below. Make sure your file is named correctly.
  4. View your webpage in a web browser.
    • If you chose the U:\public\html folder then go the following website: http://pages.cs.wisc.edu/~<your CS id> For example, if your CS id is xyz you would go to http://pages.cs.wisc.edu/~xyz You should see a white page with “This is my first webpage!!!” written on it.
    • If you chose a folder on your computer such as MyWebPage then drag the index.html file to your browser. Alternatively, you could type the URL with the path to your index.html file such as file:///C:/MyWebPage/index.html

Congratulations! You have created your own webpage. But this looks really basic and boring. Let’s try to beautify it in the next section.

HTTP vs HTTPS: If you would like your visitors to have authentication of the website and encryption of the webpage as it goes to the visitor then put your webpages in U:\public\html-s and then to access those pages use https://pages.cs.wisc.edu/~<your CS id> (see HTTPS wiki for more details).

HTML tags

  1. Tags are an important part of HTML. In the above section, you have already used the <html> tag. <html> defines where a web page starts and </html> is used to show where it ends. Hence each tag has its own start and end. Let’s start by looking at some basic tags:
  2. <head></head>: The head element is used to define information about the HTML document such as its title, some styles or scripts that run (used for playing videos, games etc.)
  3. <title></title>: This tag is used for adding a title to the webpage. The title is displayed on the browser tab. Replace your index.html with the following: 
    <html> 
    <head> 
         <title> Lab01 </title> 
    </head> 
    <body> 
         This is my first webpage!!! 
    </body>
</html>

    After you save your changes then just refresh your browser window to see the updates.

  4. The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. Hence it is better to move our text “This is my first webpage” inside the body of the website as shown below. To enter text on different lines we use a <br> tag. To create different paragraphs, we use the <p> tag. 
    <html>
    <head>
        <title>Lab01</title>
    </head>
    <body>
        This is my first webpage!!!
        <br />
        Line break before this.
        <p>
            This is some text inside a paragraph. Notice how paragraphs
            appear in html. We can write a lot of text to show one paragraph.
            Lets make this a big paragraph so that we can see how paragraphs
            look in html.
            Even if I enter text on a new line it is still part of the
            same paragraph.
        </p>
        <p>
            And now we begin another paragraph. Writing paragraphs is so
            easy now isn’t it? Creating your own webpage is so easy!
        </p>
    </body>
</html>

    Tags that have content within them should have both a start tag (e.g., <p>) and an end tag (e.g., </p>) so that browsers can easily detect where the content begins and ends. Other tags that don’t have content, may be written <br> or <br /> depending on HTML version (See HTML wiki).

  5. There are lots of tags in HTML that help in formatting. Take a moment to look at some tags listed at w3schools.com. Click on tags that you want to learn more about. Try clicking on the “try it yourself” button to see an actual demo of what each tag does. Specifically learn what the following tags do and explain them to a TA:
    • <b>
    • <i>
    • <u>
    • <ul>
    • <li>
    • <header>
    • <footer>
    • <main>
    • <section>
    • <div>
  6. Let’s try to beautify the webpage we have made so far. Try to make your website resemble the figure below.
  7. Hints (highlight to see):
    1. Make the line “This is my first webpage” bold and underline it. Use the <b> and <u> tags for this.
    2. In the body, create a new paragraph. Add the text “This is my first lab” followed by a line break <br/> tag
    3. Create a list using the <ul> tag. You can add items to the list using the <li> tag.
    4. Use the <mark> tag to make the text “HTML is easy” highlighted. Use the <i> tag to make it italic.
    5. Remember to end all tags using their corresponding end tag!
  8. Now that we have a good idea about HTML, lets add some personal touches to make it your own website.

Personalize your Website

We have provided a basic template below. Modify and add stuff about yourself that you would like to share via your website like a blog post or your academic history and interests, your hobbies, or maybe just something that’s on your mind. This is your space on the web!

<!DOCTYPE html>
<html>
    <head>
        <title>My Personal Webpage</title>
    </head>
    <body>
        <header>
            University of Wisconsin - Madison
        </header>
        <main>
            <div>
                <h1><b><u> Welcome to XYZ’s Webpage</u></b></h1>
            </div>
            <div>
                <h2> About Me</h2>
                <p> This is <i>my</i> space. Here are some of my
                    interests: </p>
                <ul>
                    <li>Writing song parodies</li>
                    <li>Playing ice hockey</li>
                    <li>Wearing jeans</li>
                    <li>Chrysler cars</li>
                </ul>
            </div>
            <div>
                <h2>Some of my favorite quotes<h2>
                <em>"Would I rather be feared or loved? Easy, both.
                    I want people to be afraid of how much they love me."</em> - Me
                <br/>
                <em>"Wikipedia is the best thing ever. Anyone in the
                    world can write anything they want about any subject, so you know
                    you are getting the best possible information."</em> - Me
            </div>
        </main>
    </body>
    <footer>
        Copyright (c); 2017 XYZ. All rights reserved. <br/>
        University of Wisconsin – Madison
    </footer>
</html>

Now let your partner setup their own website as well. Logout and let your partner login to the computer. Navigate to the right folder and setup the website using the above template.

Everyone is unique and so your websites should also display that uniqueness. Everyone has their own sense of style so let’s try adding some style to your websites as well.

CSS

To further beautify our website, HTML provides us with something called ‘CSS’. CSS stands for Cascading Style Sheets. It is a language that describes the style of an HTML document. Let’s have a look at how CSS is written.

The selector points to the HTML element you want to style. In this case it is the <h1> (header 1) element. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. So here we are setting the color to blue and the font-size to 12 pixels. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Create a text file called mystyle.css in the same folder as your index.html file. Put the following CSS code in the file.

body {
    background-color: lightblue;
}
h1 {
    color: navy;
    margin-left: 20px;
}

Take a look at what this does. It sets the background color of the <body> element in your html webpage to lightblue. It also sets the color and left margin of your <h1> element.

Now we need to tell your index.html to use this style-sheet. In your index.html add the following line in your <head> section:

<link rel="stylesheet" type="text/css" href="mystyle.css">

This tells the browser that your page is loading a stylesheet written in CSS and the link is at mystyle.css. Now try opening the webpage in a browser. What do you see?

For color names and describing colors with RGB (red, green and blue) values see https://www.w3schools.com/css/css_colors.asp.

w3schools has an entire tutorial on CSS with many interesting styles. Feel free to browse through it. Use what you learn to make your website look like the figure below:

Hints (highlight to see):

  1. Check the text-align property to center your <h1> element
  2. Set the background of your <ul> element to dark blue (#3399ff) and the background of the <li> element to light blue (#cce5ff)
  3. Check out the border property on W3Schools. Use that to to add a left border to the <em> element of your webpage.

Some more links to learn HTML

  1. http://www.w3schools.com/tags/ref_byfunc.asp
  2. http://htmldog.com/guides/html/beginner/
  3. https://www.w3schools.com/css/
  4. https://www.youtube.com/watch?v=XAPPTnAJ5Pk
  5. https://www.youtube.com/watch?v=B331GhDN130

Additional Activities

  1. Webpages generally have links to different pages. Let’s try to create a link to a Contact-Me page. Create a contactme.html document in your U:\public\html directory. Add html code to show contact information. Now we need to create a link from your main webpage in index.html to your contactme.html. This is done using the <a> tag. Try adding the following lines at some place in your index.html 
    <a href=”contactme.html”>Contact-Me</a>

    You can create more webpages and link them this way.

  2. Images help make webpages more interesting. If you have an picture then use it. If you would like to get an image from Google then use their advanced image search to find an image that you can use.
  3. This next example assumes you have an image named image.jpg that is saved to the U:\public\html directory. Now read about the <img> tag here. Now try adding the following code in your html page. 
    <img src="image.jpg" alt="Yoda" width="330" height="500">
  4. Many times we like something about some other website and wish we could do it to our own website. For this Google Chrome exposes a cool feature. Right click on the part of the website you like and select inspect.Observe a new window opens as shown below. The panel on the left shows the HTML source of the page whereas the panel on the right shows the style of the element. Using this you can learn more about HTML and get ideas on how to style elements by just looking at the website through the inspector.

This lab created by Ameya Raul and adapted by Jim Williams.