lab html website assignment

HTML Tutorial

Html graphics, html examples, html references, html exercises.

You can test your HTML skills with W3Schools' Exercises.

We have gathered a variety of HTML exercises (with answers) for each HTML Chapter.

Try to solve an exercise by editing some code. Get a "hint" if you're stuck, or show the answer to see what you've done wrong.

Count Your Score

You will get 1 point for each correct answer. Your score and total score will always be displayed.

Start HTML Exercises

Start HTML Exercises ❯

If you don't know HTML, we suggest that you read our HTML Tutorial from scratch.

Kickstart your career

Get certified by completing the course

COLOR PICKER

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: [email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail: [email protected]

Top Tutorials

Top references, top examples, get certified.

• HTML Lab Assignments

HTML Assignment and HTML Examples for Practice

Text formatting, working with image, working with link.

Lab 1: HTML and CSS

This lab is on Wednesday, February 15, 2017 at 7:30 P.M. in 32-082. This is a non-compulsory programming lab to introduce students to webpage building with HTML and CSS. View the source of this page to see a nicely documented solution to the exercises below.

Last Updated : Sun, Jan 31 2015 at 10:30 P.M.

In this programming lab, you will be completing a series of exercises that will help you structure and style web pages.

Required Resources

• HTML reference
• CSS reference
• A condensed CSS primer by 6.831 staff (It is a Google Presentation, and comments are allowed.)

Learning HTML

Exercise 0: set up the barebones of doggo's website.

• Learn about HTML tags .
• Set up the header and body of your HTML file.
• Link Bootstrap.

Exercise 1: Set up the "About Me" section

• Learn about divs and classes.
• Learn about Bootstrap's grid system
• Add a header, image, and link.

Exercise 2: Finish setting up the other sections yourself.

• Add a table with your classes.
• Add a list with your extracurriculars.
• Add a form that people can use to contact you with.

Learning CSS

Exercise 3: add and style a table of courses.

Modify the page to include a table of courses you are taking and have taken. Here are some examples of simple tables . Your table should have:

• three columns: course number, course title, and semester taken
• two vertical sections, with headers for courses taken 'For Credit' and as 'Listener'
• alternating row background colors, so it's easy to read
• green colored text if the class is currently being taken

Exercise 4: Make it your own

Try out adding:

• different fonts
• a cool background
• anything your creative mind can think of!

Exercise 5: Codecademy Exercises

Do the projects on the Codecademy website .

Lab 1: Basic HTML and Web Pages

Emily '08 (Art major): "A couple months into working here [a law firm], I realized I had a much, much easier time with the web software than my colleagues -- all because I had learned the basics of HTML in your class! Then, after a heart-stopping incident in which I learned on-the-fly how to restore a broken section of the web (someone accidentally deleted the template for an entire section of the site...oops), the head of my department decided that I should be the sole decision maker for the website, responsible for leading all its content-, design-, and tech-related projects."

Advice: If your web page doesn't work right on myCpanel, use the View Source display in your browser. It will often help you to identify things like files that you didn't upload (or whose names you have spelled wrong, e.g., in the wrong case), missing tag terminators, failure to quote filenames in hrefs, and the like. I find Firefox easier than Chrome or Safari but any of them will be helpful.

Part 1: Introduction Part 2: HTML Framework Part 3: Text Part 4: Links Part 5: Lists Part 6: Graphics and Sound Part 7: Making Your Page Visible with cPanel Part 8: Submitting your work W3Schools web development tutorials and reference

Part 1: Introduction

Web pages and html.

On Windows, you can use Notepad, or you can use WordPad if you save your files as ".txt" format. You can find these programs from the Start menu in places like All Programs | Accessories or All Programs | Basic Applications. Or search for them from the "go" menu. Do not use Word to edit plain text files. On a Mac, you can use TextEdit (in Go | Applications ). Unfortunately TextEdit is too smart for its own good. Use Preferences | New Document to set "Plain Text". Do not use "rich text format" (.rtf). Under Open and Save , uncheck the box that says "Add '.txt' extension to plain text files". When you do this, the ruler at the top of the window should disappear. Uncheck the "Smart" quotes, dashes and links under Preferences | Open and Save in TextEdit to allow you to reopen a file as a text file if you have saved and closed it.

Mac users: Some updagted suggestions for defeating TextEdit: 1. in Preferences, New Document tab select Plain Text turn off smart quotes turn off smart dashes Open / Save tab display HTML files as HTML code Plan text file encoding: customize encoding list Western ASCII for open and save HTML saving Western ASCII 2. Paste the template into an empty TextEdit window 3. GO SLOW HERE Save... change filename to index.html [type the .html extension explicitly!] TextEdit is much too eager to set the wrong defaults and then automatically do things because of the settings.

Viewing Your Work

Part 2: html framework.

Web pages are written in a language called HTML, which stands for HyperText Markup Language. HTML is ordinary text, but it includes formatting information that describes the layout. This extra information is contained in a set of tags , which are ordinary text surrounded by < and > signs. They give the browser information about how to display the text.

<html> <head> <title> Title of the web page goes here </title> </head> <body> Content of the web page goes here </body> </html>

BODY Attributes

The entire framework, part 3: text, regular text and paragraphs, escape codes, text style, size and color, other text tags, part 4: links, text links to other pages, links within a page, part 5: lists, ordered lists, unordered lists, part 6: images and sound.

"If you want to use an object or work, which may include an image, a background pattern, a section of text or a musical, film, television show, or video selection that you would like to use, you should make a good faith effort to determine that such use constitutes a "fair use" under copyright law or you must obtain permission of the owner or copyright-holder. As a general matter, you are free to establish links to Web pages you enjoy and which you would like to share with others. But you are not generally free to copy or redistribute the work of others on World Wide Web (or elsewhere) without authorization and proper attribution."

Adding Images

Adding sound, using images as hypertext links, part 7: making your page visible with cpanel.

If you don't get a confirmation message from OIT about your new cPanel account quite soon, check your Gmail spam folder. Google thinks the confirmation is spam in some cases.

Part 8: Submitting Your Work

Lab 2: First HTML Webpage

Due: saturday, january 28, 2023.

The purpose of this assignment is to practice writing basic HTML. In this assignment, you will create a new HTML file and load it with “dummy” content. Then you will markup the content with HTML tags. And finally, you will upload the HTML file to your account on the web server. You will need to remember your FTP account information from Lab 1.

Step 1: Create a new HTML file

• On your desktop (or anywhere on your computer's file system) create a folder titled: lab02
• Inside the lab02 folder, create a folder titled images
• Inside the lab02 folder (not the images folder) create a new HTML file named start.html
• Into your code editor, copy the following code exactly: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Lab 02</title> </head> <body> </body> </html>
• Save your file – and generally speaking, save often!

Step 2: Add content to your web page

For this assignment, you can use the "comp" provided (see last page of this document) as a guide to gather some “Lorem Ipsum” text and a “FPO” images. It doesn’t really matter if your webpage looks exactly like the comp. You only need to use it as a guide. (In fact, it’d be better if you experimented with some different content to get a feel for how it works.)

Prep: Gather some placeholder content

• Get some placeholder text (a.k.a dummy text or lorem ipsum) and keep it handy.
• Get an FPO image (FPO stands for For Position Only ); for our purposes, you need a small image, no wider than say 300 pixels or so, and the file type must be: jpg , png or gif .

Start filling your HTML file with content

• Using the comp at the end of this document as a guide, you will write and paste text into your open HTML file (in your code editor) inside the one <body> tag in the HTML.
• Your goal is to make it look like (but it doesn’t have to be exactly) like the comp .
• Write or copy & paste plain text into your HTML document between the <body> tags. You can start by typing something like this between the <body> tags: <h1>Hello World!</h1>
• Be sure you indent the H1 within the open/close BODY tags.
• Save your HTML file, toggle back to your lab02 folder and double click your start.html file. The file will open in a web browser – whatever is the default web browser for your computer. There, you should see something like this:

• For the rest of this section, you will continue to write or copy & paste text into your HTML document, always between the one set of <body> tags. (You can use any bits and pieces of the placeholder text – the lorem ipsum stuff – where ever you want.) As you go, you will need to add “markup” (the tags) to the content.
• First level heading
• Second level heading
• Bold (strong) (Note: do not ever use the <b> tag)
• Italic (emphasis) (Note: do not ever use the <i> tag)
• A link to an inline image (hint: your “src” will be something like "images/cat.jpg", you will also need to create an "alt", something like "my cat", do not use a height="" or width="" attribute on your image tag Even though w3schools.com shows an example of an IMG element that uses the height and width attributes, do NOT use them! (To be explained in a future lecture.)
• A hyperlink to another website (hint: your “href” will be something like `http://www.google.com`)
• An unordered list
• An ordered list
• An HTML comment (note: you will not see the comment in the web browser)
• As you write your code. Use lots of white space in the code! Make sure you indent and space your HTML tags appropriately to make it easy to read the code.

In general, the process is to write some code in the code editor, save it, then toggle to your web browser and refresh the browser. You will see your edits in the web browser and you will figure out what you need to do next. Then, you then toggle back to your code editor and start the process over.

Step 3: Upload your work

• When you are done with your webpage, use your FTP software to access your account on csc170.com (remember your FTP login information?) and upload your files:
• Open the FTP software and login to your account using the login credentials you used in Lab 1.
• Drag your lab02 folder into the online area in your FTP tool. The result will put all your files and folders on the server.
• In a web browser (any), go to this address to check your handiwork:
• www.csc170.com/accountname/lab02/start.html (where accountname is your account name)
• Step 4: Report your work
• In our CSC 170 section in Blackboard, in Lab 2: First HTML Webpage , post a link to your webpage to receive credit for this lab assignment

Below is a comp to guide the design of your webpage. Remember: it is not important to make your webpage look like this. In fact, this is a good time to do some experimentation.

CS2 Lab 2 2023, HTML 🍨

Due Date: 10/05/2023 Need help? Remember to check out Edstem and our Website for TA help assistance.

• Introduction 🍦

Have you ever wondered how websites are made? They’re all written in a language called HTML (HyperText Markup Language), which is the building block and structure of the webpage. We can use HTML to create headings, paragraphs, lists, tables, links, and more.

This tutorial will introduce you to the basics of HTML. By the end of it, you should know enough to create your own webpage.

This tutorial will require:

• Chrome web browser — Your lab is viewed by graders in Chrome
• Visual Studio Code (which, you downloaded in lab 0)

💥 Pro Tip on this lab and all future coding assignments:

• Check your code incrementally. This means that after every task, save your file ( command + s ) and view the Chrome browser to see if the correct things appear ( more on this later! ). You add a paragraph - did it appear the way you wanted it when you opened it in the browser? Don’t wait until you’ve “finished” your file to check - this will make it much harder to pinpoint where errors happen.
• If you have questions about the lab content, you can ask a TA during lab hours or post on https://edstem.org/
• Learn how to set up an HTML document
• Use common HTML tags to add headings, paragraphs, links, and images
• Make lists and tables
• Understand divs, classes, and IDs
• Use comments to annotate and explain code
• Make forms with different input elements
• Initialize HTML Lab

Task 0: Set your VSCode up for HTML:

You will need to download the extension “Live Server” so that you can easily see your files rendering in the Chrome browser.

• Open Visual Studio Code.

• Click install! Your Visual Studio Code will now have the extension for you to use for the rest of the course.

Task 1: Double click your CS2 folder on your desktop, and create a folder for HTML . Then, create a new folder inside called HTML Lab . All your files for the HTML Lab should live in this folder.

• Setting up an HTML File

As a general rule, HTML pages can be named anything as long as it ends with .html . However, it’s accepted practice to name your first page, or your website’s homepage, index.html .

HTML pages are always composed of a single DOCTYPE specification ( <!DOCTYPE html> ) and multiple HTML tags, which are things that look like <html></html> . The DOCTYPE specification tells the browser what language it is reading (in this case, HTML).

HTML tags consist of an open angled bracket, the name of the tag, and a close angled bracket. Tags almost always come in a set of 2: an opening tag and a closing tag . A closing tag will always have a slash ( / ) before the name of the tag (for example, </html> ). Some tags do not need closing tags, but unless we specify, you should always have a closing tag for every opening tag.

Task 4: Once you’ve created your file, start by typing in <!DOCTYPE html> . Next, make a new line and type in <html> , and then create another line with </html> . (Typically Visual Studio Code will create “closing” tags like </html> for you!) Your entire document will look like this:

After your opening <html> tag, you’ll also need two other tags: a head and a body. The head is where you will put information like the title (what it says at the top of your browser and its tab), information about the document (don’t worry about this yet), and links to other files (don’t worry about this yet, either).

Task 5: Add the head ( <head></head> ), title ( <title></title> ), and body ( <body></body> ) tags to your document. There should only be ONE set each of html, head, title, and body tags. All other tags may be repeated.

IMPORTANT NOTE : Everything we will be adding to our web page from now on will go between the body ( <body></body> ) tags.

Sample HTML file:

When you make web pages, you should always set up your document to look like this— specifying the DOCTYPE and adding the html, head, title, and body tags. These tags are essential in every HTML page you write.

Indenting your code as we have above will make your life much easier , and is industry standard. The extra spaces from indents don’t actually show up in your page, but makes your code more readable as it is much easier to identify where a tag begins and ends.

Summary At this point, you should have initialized your HTML file according to the following steps!

• Open VS Code and create a new file. ( File -> New File , name it index.html , and add it to your CS2 folder)
• Set up your file with DOCTYPE, head, title, and body tags.

More information on HTML basics: https://www.w3schools.com/html/html_basic.asp

• Writing HTML In Visual Studio Code

As you go along, opening the document in Chrome will take care of interpreting what you have written and rendering it into a web page.

The following steps are a high-level overview of your workflow throughout the lab:

• Save your files. You can do this by going to File → Save As or using a keyboard shortcut Command + S (Mac) or CTRL + S (Windows). Make sure that your file name ends in “.html”, so that the operating system will know to open it with Chrome.
• To preview your web page, just right-click the name of the HTML file on the left side of the VScode screen and click Open With → Live Server . You can go back to editing your HTML file by opening it in the text editor.
• We will provide checkpoints throughout the lab where you open the document in Chrome and make sure that your web page is showing everything you need!

Tip: You can keep the webpage open in your Chrome browser and reload it as you save changes to your html file to make the changes appear.

We’ve added some HTML tags to our page, but the ones we’ve added don’t actually make anything show up when you open your page in your web browser. They’re just essential tags every web page needs in order to be correctly “set up.”

Now we’re going to actually add some content to our page! Let’s start off with the paragraph tag . Everything between your opening and closing paragraph tags will be displayed on your website as text.

Task 6: Add a paragraph tag <p></p> to your document between the body tags and write a message between the opening and closing paragraph tags.

If you want to add more text in a new line, try adding another paragraph tag after the first tag.

• Adding Headings

Headings (not to be confused with the head, <head></head> ) help break up and emphasize sections of the page. There are six heading tags, <h1> to <h6> . <h1> is the biggest heading, and <h6> is the smallest.

Task 7: Add three different-sized headings to your document. These should go above the paragraph tags ( <p>"your message here"</p> ) that we just created in Task 6.

Remember, these go between the body tags.

Checkpoint : be sure to check what your website looks like at this point!

Save your code by going to File → Save As or using a keyboard shortcut Command + S (Mac) or CTRL + S (Windows).

Then, right click the file name and click “open with live server”. Make sure everything looks ok. A reminder that everytime you save your code in Visual Studio Code, the edits will be re-rendered in your browser. ( you might have to refresh the browser tab. )

Remember, we recommend you save and check the browser often to see your edits and catch bugs early on!

• Adding Links

To add a link to another web page, we use an anchor tag .

There are three main parts in an anchor tag. Anchor links are different from other tags because they have an href attribute. An attribute is an extra bit of information you’re giving about the tag. The href attribute specifies the address you want the link to point to. If you wanted to change the address, simply change the http://google.com between the quotation marks! Lastly, the text in between the opening and closing tags themselves specifies the link text actually displayed on the page.

In the above example, we’ve created an absolute link. An absolute link points to any website on the internet. You can tell that a link is absolute if it has the http:// prefix in it. If you want to link to a page you’ve created on your own computer, you must create a relative link. For example:

The HTML above would make the “Homepage” text a link to your index.html page. Of course, the link will only work if you have an index.html file in the folder you’re working in.

Task 8: Add a link to your HTML page . The link can be anywhere on your page and lead to anything!

These can go anywhere between the body tags.

More information about links: https://www.w3schools.com/html/html_links.asp

• Adding Images

We can also add images to our webpage using an <img> tag. For example:

Notice that unlike all the other tags we’ve seen before, there is an extra / before the > of an image tag, and the img tag does not have a closing tag. Moreover, an img tag has an src (source) attribute which defines the location of the image.

One way to include images is to link images from the internet using the image’s URL, for example, to include an image of icecream, we can search for an icecream image, right click, select copy image address, and include the image address as the src :

We can also link an image that’s saved to the computer. This link is relative to where you are in the file system. For example, if your image is saved to your Downloads folder, you will need to have something like this:

An easy way to include an image is to put it in the SAME folder as our HTML file; then our src is just the image name. For example, if we put an image called “icecream.jpg” in the same folder as our HTML file, we could include it using just:

Make sure your image file has an image extension (example: .png, .jpg)

Task 9: Add two images to your web page: one that is online, and another that is saved to your computer .

Make sure the image is saved in your CS2 HTML Lab folder

More information about images: https://www.w3schools.com/html/html_images.asp

• Nesting Tags

Note that you can place tags inside other tags. This is called nesting . Say you have a paragraph of text, and you want to link a single word in it. With the power of HTML, we can nest an <a> tag in a <p> tag!

<p>Click <a href="other.html">here!</a></p>

Note that the order of closing tags is important. Whatever the most recently opened tag is must be closed before you can close any other tag.

• End tags have a slash before the tag name.
• Tags must be closed, either with a separate closing tag or self-closing, and closed in the proper order. If you fail to do this, the browser will try to guess how to show your page, which could be wrong. If your page looks strange, you may have forgotten to properly close a tag.
• Follow this rule: Always set the beginning and end tags at the same time, always placing them on the farthest end of the item being affected. For example: <tag3><tag2><tag1>Multiple Tags</tag1></tag2></tag3>
• Making Lists

In HTML, there are two types of lists: ordered (numbered) and unordered (bullets). An Ordered List begins with the <ol> tag and ends with </ol> . An Unordered List begins with <ul> and ends with </ul> .

Each item in the list must be surrounded with <li> and </li> , which stands for List Item.

Here’s an example of an ordered list:

Which looks like:

You can also nest multiple lists together, like so:

Notice that the above code indents “Chocolate”, “Cherry”, and “Spoon” (sublist) under “Sundae”. Also notice that an ordered list lists items numerically, starting with 1. An unordered list lists items in bullet points.

Task 10: Make an unordered list with four bullet points and an ordered sublist with three numbered points.

More information on lists: https://www.w3schools.com/html/html_lists.asp

• Making Tables

You can organize data on your page using a table . Here’s a breakdown of the tags used in a table, in the order used to declare a table:

• border tells how thick the table borders are, in pixels
• cellspacing is the amount of spacing between cells
• cellpadding is the amount of space/padding between the cell border and the cell contents
• <caption> </caption> adds a caption over the table. This is optional.
• <tr> starts a new table row.
• <td></td> adds a piece of table data (text, image, or link) as a cell in the row (like a column).
• </tr> ends the current table row.
• </table> ends the table declaration.

If you want to make headings for a table, you can do so by making the <td> tags in the first row (the first <tr> tag) as <th> tags. Example:

Task 11: Make a table with 7 rows and 3 columns. Don’t worry about table headings.

More information on tables: https://www.w3schools.com/html/html_tables.asp

• Making Divs

Divs are useful because they allow you to divide your page into different containers. You will need this when you learn CSS in the next lab, so that you can style different parts of your website individually. They are important to help us style our web page, but they also help us group several HTML tags together. For example, we might want a div to group together some tags for a navigation bar on our website.

Now, you can visually see the two different divs as two different containers.

Task 12: Make three divs with different colors and sizes. (hint: change the size of the div by modifying the width and height).

More information on divs: https://www.w3schools.com/tags/tag_div.ASP

• Making Comments in HTML

When working in HTML, it’s important to thoroughly explain and annotate your page as you create it. If you don’t, your work can become cluttered and disorganized. This is especially a problem if you have to show others your work! Comments are also great for debugging, since you can comment out certain lines to look for problems in your HTML code.

Comments take on the following syntax: <!-- Write your comments here -->

Notice how the start tag has an exclamation mark, but the end tag doesn’t. You can apply this to any line of code to “comment it out”, or remove it from being compiled/loaded onto your page.

More information on comments: https://www.w3schools.com/html/html_comments.asp

• Creating Email Links From Your Page

To let your visitors email you (or somebody else) directly from your website, you can use the mailto: command. It follows the same coding scheme as a standard hypertext link and appears in a similar manner, but clicking it should prompt the visitor to send you a piece of email using an email application on their computer. For example:

Notice it’s the same format as the links you should be used to writing except you write mailto: in place of http:// and your email address in place of the page address. You still need the </a> tag at the end. Note there is no space between the colon and the e-mail address.

• Common Tags 🍨

To Hand-In Lab 2 : Come to hours and show your TA six things for checkoff:

• Have a correctly set up HTML document with DOCTYPE, head, title, and body tags
• Have one paragraph tag, three different sized headings, and a link
• Have two images, one from an online source, and one that you downloaded to your computer
• Have an unordered list with four bullet points and a sublist (ordered) with three numbered points
• Have a table with seven rows and three columns
• Have three different divs of different colors/sizes

If you have any issues with completing this assignment, please reach out to the course HTAs: [email protected]

If you need to request an extension, contact Professor Stanford directly: [email protected]

Your browser is not supported. Please upgrade your browser to one of our supported browsers . You can try viewing the page, but expect functionality to be broken.

Web Lab is a programming environment where you can make simple web pages using HTML and CSS. Design your web pages and share your site in seconds.

Ages 13+, all modern browsers, English only

Try the Computer Science Discoveries unit that introduces Web Lab

Unit 2: web development, grades 7 - 9.

Please select your language

HTML Exercises

Steps to create a webpage in html using notepad, program to see difference between paragraphs & normal text with line break, write an html program to display hello world., write a program to create a webpage to print values 1 to 5, write a program to create a webpage to print your city name in red color., write a program to print a paragraph with different font and color..

• HTML Exercises Categories
• HTML Basics
• HTML All Exercises & Assignments
• HTML Top Exercises
• HTML Paragraphs

EECS448: Lab 3: HTML, CSS, and JavaScript Primer

This lab is due two weeks from the start of your lab session (because of spring break).

This lab (Lab 3) is a primer for web pages. Lab 4 will be about server-side web services, and builds on this lab.

This lab is an individual lab. NOTE : Attendance is required for a grade.

Additional Resources

Html: html, body, and head.

All HTML documents are surrounded by the <html> tag. It is an open and close tag that then contains the <head> and <body> tags. The head contains some of the behind the scenes mechanics. One tag you can put in the head right away is the <title> tag. The title tag controls what a browser tab or window title bar’s text is. The body contains all the content that the is contained with the web page. Every, image, link, paragraph, or table resides here.

HTML: Images

You can put images in your web page, but first you need to pick an image to embed. There are two ways to refer to an image:

Download and use a local image

Refer to the address of an existing image

The img tag is a stand alone tag like the break tag. It doesn’t surround anything. Notice how we added the src="theFileNameHere.jpg" portion? That’s because the tag alone isn’t enough information. We can’t just tell the browser we need an image, we need to tell the browser which image we want. If we just list the file name, the browser will assume it’s in a local folder. What you added was an HTML attribute. All attributes have a similar format: <tag attribute = "value">

You pick some attribute then set it equal to a value in quotation. There are many attributes and values for various tasks. For example, depending on your image, it may be very large. You can control that. You just need to add a height and a width attribute.

You can control the pixel heights and widths of the image. You can also do percentages if you like:

The other way we can display an image in our page is link to an existing one instead of downloading a copy. To do this, you can go back to that image you found and instead of saving a copy, choose "copy image location" (or the wording that matches your browser). You would then replace the file name with this URL. Sometimes these URLs get very long, so you don’t have to do this right now, but it’s good to be aware of. Reference: W3Schools HTML <img> Tag

HTML: Anchor tags

To create clickable links, you will use the anchor tag, or <a> for short. Here’s the template:

For example if I wanted to make a link that took people to google when they clicked on the words "Go to google" I would do the following:

Remember to include the "http://" part. Even though you don’t type that in browsers anymore, you’ll need it in your code. It acts as a flag that tells the browser it need to use the Hyper Text Transfer Protocol, or in other words, it needs to grab something from the internet instead of something local. Reference: HTML Links

HTML paragraphs

Paragraphs are used to create, well, paragraphs. The text get some automatic formatting, like ensuring its not a the same line as some other piece of content. The template is: <p>Your paragraph here</p> Reference: HTML Paragraphs

JavaScript is language that runs client-side and is used to make your HTML pages interactive and responsive. (It is not a scripted version of Java, it's a whole other language.) A lot of syntax is the same or similar to C++/Java:

• if statement (boolean operators)
• functions (mostly)

Important changes:

• All variables are declared with the key words let
• There is no explicit class key word (see reference below)
• JS files don't include each other, instead they are all included in your HTML document

Useful reference and tutorials: W3schools JavaScript Tutorial

Connecting JavaScript to an HTML file

In the head tag of your HTML file, include the script tag:

The script tag is an open-close tag that we can put our JS code in (and it helps modularity to simply link to another file).

JavaScript functions can be called in reaction to an event occurring. For example, we can define a button in HTML to call a JavaScript method.

Other useful events:

• onclick (when a tag is clicked)
• onmouseover (when the mouse browses over a tag)
• onmouseout (when the mouse leaves the area of a tag)
• onload (when a tag is loaded; setting this event in the body tag will call a JavaScript function when the page loads)

Manipulating HTML

JavaScript can manipulate nearly every aspect of an HTML dynamically. To give JavaScript control over an HTML element you must do two steps:

• In the HTML file: Give a tag you want JavaScript to be able to affect an id attribute
• In the JavaScript file: Find the element by it's id and manipulate the attribute in question

Exercise 1: Password validator

Create a webpage that allows the user to enter a password two times in order to validate it. Web page content:

• Two password fields: first to enter the password and a second one to verify it
• The passwords entered don't match
• the passwords are not at least 8 characters long

Exercise 2: Slide show!

Create a new webpage that has a single img tag and two buttons labeled previous and next. Your slideshow should:

• Contain at least five pictures of your choice (appropriate for class)
• Cycle through all the pictures
• Wrap around to the beginning if I keep pushing next
• Wrap around to the end if I keep pushing previous
• Force the images to be all the same size regardless of the original image files' dimensions

Cascading Style Sheets (CSS)

CSS, or Cascading Style Sheet, is a whole other language from HTML (that's right, you’re learning two languages in one day). It's entirely a helper language used to define how HTML should appear. It includes styling details such as, colors, sizes, font families, and background image.

In the same folder your webpage is in, create file called myStyle.css . Note the different extension? That's because this file will only contain CSS code. Now add the following code to your CSS file:

Now, go back to your HTML sheet. Inside the head tag, put the following:

Now make sure all the files are saved and refresh your browser. You should see your paragraph now has a blue background.

All styling code follows this template:

You can style almost any HTML tag. There are many attributes, such as background-color, and values, such as, blue. We’ll discuss a few here.

CSS: Background colors

You already have a background color for your paragraph. Now let’s give one to the whole page! To do so, we'll style the tag that surrounds everything, the body.

There are lots of color keywords, such as red and blue. There are many others, but if you need a very specific color, you can use W3Schools’ color picker. Reference: HTML Color Picker

CSS: text color

You can give the text in your web page it's own color. The "color" attribute colors the color the text inside of a given tag. Example:

Now all paragraphs will have a red background and white text.

There are many things we can change about font. The color attribute controls the color of text, but there are several attributes that apart of the font attribute collection. Here’s an example:

Now all paragraphs will have 22pt (the size), white arial font on a red background. Reference: CSS Fonts and CSS Reference

CSS: Background images

Lots of tags can have a background image. We'll give our web page a particular background image. You could give your lists or paragraphs background images too, but they probably aren't large enough to utilize them well. The following code gives the body a background image of a gif (assuming it is in the same folder) that will stretch to cover 100% of the screen (the size) and not repeat.

You can also play with how the background image behaves when scrolling by tinkering with the position. For example if you don’t want is to move when the user scrolls do the following:

References:

• Basic: http://www.w3schools.com/cssref/pr_background-image.asp
• Position: http://www.w3schools.com/cssref/pr_background-position.asp
• Size: http://www.w3schools.com/cssref/css3_pr_background-size.asp
• Repeat: http://www.w3schools.com/cssref/pr_background-repeat.asp

CSS can also detect some simple events that occur on your page and adjust the styling accordingly. For example, you can change the styling of a tag to respond when a user has their mouse over it. Let's look at two blocks of styling for the anchor tag (our clickable links):

With these two blocks, the user will see red text with a blue background for all links normally, but when they hover over the link, the styling will invert. Now, you can adjust any styling you want. You could make a paragraph that increases its font size when hovered over or a list that changes from arial to courier font when hovered over. Reference: CSS :hover Selector

CSS: classes

Sometimes you don’t want all tags to receive the same styling. One option is to create classes. It’s a two part process. On the CSS side you need to create a styling block that will contain the information for your special tags.

Default paragraphs will have the top block of styling, but any paragraph that I choose to can have the halloween themed styling. I just have to tell HTML which ones I want to be special. To do so, I include the class attribute on the HTML side:

Exercise 3: Personal Profile

Make a profile page that is styled with CSS. Have fun with this. You can make a profile about anybody or anything. You are not required to make this about yourself or post any personal information online. This profile can be entirely fictional. HTML Requirements:

• Profile picture
• Biographical paragraph
• Hyperlinks to favorite web sites
• Embedded youtube video

CSS Requirements:

• Use all the attributes listed in the CSS section at least once
• The page should not induce seizures or headaches - in other words, mind the color pallet you choose
• All text should be easy to read

CSS manipulation through JavaScript

The style attribute.

JavaScript, in addition to accessing and manipulating HTML, can change the styling of any tag you give it access to. The reality is that there is a style attribute that nearly every tag has. For example, one could style a paragraph tag using the style attribute:

Levels of Styling

The previous example was an inline level styling. The other levels of styling, in order of precedence, are:

• inline : the style code is given in the tag (highest precedence, but only applies styling to that one tag)
• document level : the style code is written inside a style tag in the head of the HTML document (second precedence, but only applies to the document it's written in)
• external: what we do in this lab, writing the code in an external CSS sheet (lowest precedence, but the most modular)

The JavaScript style Object

The Document Object Model (DOM) that defines the structure of an HTML document has inside of it a style object. To access the style object, you simply need to access the tag, via its id, like in previous exercises. You can then access the style object of that tag.

Exercise 4: CSS Manipulation

Create a web page that has a paragraph with some dummy text. Near the paragraph have text fields to accept the following values:

• green value

Background color:

Finally, have a button that, when clicked, changes the border and background color to be as specified. You can use either the rgb() method or a color code, but you should tell the user what units they are in (00-FF or 0-255).

NOTE : the names of the style attributes in CSS are all hyphenated (e.g., background-color) but in JavaScript they are nearly all converted to camel-case. Here is a reference of the style properties that JavaScript can access and change.

Exercise 5: Publication

In addition to uploading your code to GitHub, place your files in the public_html folder on your EECS account. You can then access them through the URL:

Note : If you experience any problems with lab equipment or your EECS account, contact the Engineering Technical Support Center immediately. Please be polite and as detailed as possible: Ticket Form

Making an index.html

When you go to your people.eecs page, you'll most likely see a simple file listing. This is the default behavior of apache. To make a landing page, you can write an index.html file. In your index.html

• Use links, JS, or whatever means you like to create a menu to all your other exercises
• Spruce it up with styling so it's more than just four hyper links - apache could have given us that without any effort

If you already are using your default homepage just provide us with a sub-folder URL. Example:

Web Language Summary

"Are all these webpages I look at everyday just text files in directories with code written in them?" Yes, they are.

• [25pts] Exercise 1: Password validator
• [30pts] Exercise 2: Slide show
• [15pts] Exercise 3: Profile
• [20pts] Exercise 4: CSS Manipulation
• [10pts] Exercise 5: Publication

Before the deadline, send an email to your TA with the following information:

Email Subject line: EECS448 LastName FirstName StudentID Lab03

The body of the email should contain:

• The Github URL to your lab03 code
• Your publication URL e.g., people.eecs.ku.edu/~YourOnlineID

Additional Reading

This lab was initially designed by Dr. John Gibbons , and Dr. Alex Bardas .

Page generated Wed, 19 May 2021 16:04:44 +0000

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications

WEB1013 - Assignment - FPT Polytechnic

duyplus/WEB1013

Folders and files, repository files navigation, đây là bài tập assignment web, được thiết kế bởi hoàng duy (duyplus), mssv: ps18293.

Demo ASM : https://duyplus.github.io/WEB1013

Facebook : https://facebook.com/duyplusx

Instagram : https://instagram.com/nghdyyy

Twitter : https://twitter.com/duyplusdz

• JavaScript 0.9%