Web DesignHTML Challenges

Coding Challenge

Re-create the html page shown here (click on the image to see it full size).

Projects:A small website project,A step-by-step web design project,Build a basic web page,Build a small website

A submit button with your own text (such as Send Survey)

Have a go at creating a new webpage that displays a form with the fields in the image. You might need to read throughHTML Dogs Accessible forms tutorialfor this challenge.

Create a small online survey with four questions of your own. Your survey should first collect the participants details (name, address, gender, D.O.B., a password etc), followed by four questions to answer.

Radio buttons and checkboxes (as part of your form design).

Challenge 1: Which heading to choose?

Text is available under theCreative Commons Attribution-ShareAlike License; additional terms may apply. By using this site, you agree to theTerms of UseandPrivacy Policy.

JavaScript:An Introduction to Programming with JavaScript,JavaScript Challenges,Getting to know JavaScript events,Getting to know the Document Object Model with JavaScript,JavaScript pen-n-paper activities,Web Programming Intro,Produce basic client side script for dynamic web pages

add some alt text to your image for accessibility. This will be read to people, so make sure its accurate and descriptive

!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01//EN html lang=en head titleSundial/title /head body h1 Sundial /h1 From Wikipedia, the free encyclopedia. pA sundial measures time by the position of the sun. The most commonly seen designs, such as the emordinary /emor standard garden sundial, cast a shadow on a flat strongsurface/strong marked with the hours of the day. As the position of the sun changes, the time indicated by the shadow changes. However, sundials can be designed for any surface where a fixed object casts a predictable shadow. Most sundial designs indicate apparent solar time. Minor design variations can measure standard and strongdaylight saving time/strong, as well./p h2 History /h2 pSundials in the form of obelisks (3500 BC) and shadow clocks (1500 BC) are known from ancient Egypt, and were developed further by other cultures, including the Chinese, Greek, and Roman cultures. A type of sundial without gnomon is described in the old Old Testament (Isaiah 38:2). The mathematician and astronomer Theodosius of Bithynia (ca. 160 BC-ca. 100 BC) is said to have invented a stronguniversal sundial /strongthat could be used emanywhere on Earth/em. The French astronomer Oronce Fine constructed a sundial of ivory in 1524. The Italian astronomer Giovanni Padovani published a treatise on the sundial in 1570, in which he included instructions for the manufacture and laying out of mural (vertical) and horizontal sundials. Giuseppe Biancanis Constructio instrumenti ad horologia solaria discusses how to make a perfect sundial, with accompanying illustrations./p h2 Installation of standard sundials h2 p Many ornamental sundials are designed to be used at 45 degrees north. By tilting such a sundial, it may be installed so that it will emkeep time/em. However, some mass-produced garden sundials are inaccurate because of poor design and cannot be corrected. A sundial designed for one latitude can be adjusted for use at another latitude by tilting its base so that its style or gnomon isstrong parallel/Strong to the Earths axis of emrotation/em, so that it points at the north celestial pole in the northern hemisphere, or the south celestial pole in the southern hemisphere. A local standard time zone is nominally 15 degrees wide, but may be modified to follow geographic and politicalem boundaries/em. A sundial can be rotated around its style or gnomon (which must remain pointed at the celestial pole) to adjust to the local time zone. In most cases, a rotation in the range of 7.5 degrees east to 23 degrees west suffices. To correct for daylight saving time, a face needs two sets of numerals or a correction table. An informal standard is to have numerals in hot colors for summer, and in cool colors for winter. emRotating /emthe sundial will not work well because most sundials do not have equal hour angles. Ordinary sundials do not correct apparent solar time to clock time. There is a 15 minute variation through the year, known as the equation of time, because the Earths orbit is slightly elliptical and its axis is tilted relative to the plane of its orbit. A quality sundial will include a strongpermanently-mounted table/strong or stronggraph/strong giving this correction for at least each month of the year. Some more-complex sundials have curved hour-lines, curved gnomons or other arrangements to directly display the clock time./p /body /html

Challenge 7: Some advanced table features

Hint: To recreate the nested list from the image, youll need to use the type attribute on the UL or OL tags. Like the previous list, adding this attribute will make your code invalid, but we can correct it later by using CSS instead.

Testing:Testing Website performance,Website Performance Test Plan

prevent the blue/purple border from appearing around the hyperlinked image

Use theHTML Dog intermediate tutorial on tablesto re-create this table.

An index.html containing your image map

Course meta-information:Web Design,About the web design learning project,New Structure,Sample Timetable

This page was last edited on 1 May 2018, at 23:30.

Using some free third party software of your choice such asMapEdit(orOnline Image Map Editor for Mediawikior hand code it if youre really keen. You can find a tutorial on how to do thathere), use the map of Australia (or your own country) as a graphical table-of-contents. When a user clicks on a state, they should be taken to a separate page just for that state.

add a drop shadow to the image using CSS (theres a few ways to do this; you may like to check out the box-shadow examples )

Note:Yes, its true, a web browser will display the h1 heading very large, and the h6 heading quite small, and all the other headings in between! But dont get into the habit of selecting an h4 heading because it displays with the size that youre after! You can always modify the size of your elements using your stylesheet (more on that later).

In this column add the missing city data (each row of data was for the three cities: Sydney, Melbourne and Adelaide)

Add another row of data for Hobart, with the following temperatures: January: 24.8, February: 25.2, March: 19.8

CSS:Learning Basic HTML and CSS,CSS challenges,Embedded CSS,Basic HTML and CSS Tutorial,Inline CSS,Develop cascading style sheets,CSS3 Animations

Challenge 8: An accessible form with style

For help with this challenge, you can refer to theHTML Dogs Link Tutorial.

Open your file in a web browser and compare it to the image displayed here (you can right-click on the image to open a larger version in another window or tab).

Note that fieldsets are being used to group the form fields.

A nested list is a list that contains another list. On the web, theyre commonly used for indexes or tables of contents (such as the one at the top of his page!) or menus that show all the pages inside of a section of a website.

HTML:What is HTML,Advanced HTML Tutorial,,Lists and Tables,The Structure of HTML,Pen and Paper HTML activities

Try recreating the nested list to the right. Use your HTML validator software to check errors as you go along — its better to pick up problems early on, especially with how lists must be nested in others.

As always, ensure that your page validates!

Once youre all finished, read through the following excellent snippets from HTML dog as a summary of what youve learned:

The key is to use the headings to structure your information in a useful (and meaningful) way! For example, every page should only ever have one main heading – your h1 heading. An h2 heading should only ever be a sub-heading of your h1 heading. Similarly, an h3 heading should only ever be a sub-heading of an h2 heading etc.

Challenge 1: Which heading to choose?

Add an extra column of data to your table.

Use the following HTML Challenges to hone your decision making skills… should I use an h2 element or a strong element?

If you dont have a border, check the table tag for an attribute you may have missed.

add a 15 pixel margin around the picture using CSS

have the picture link to the original image on flickr

Links to pages in the wikipedia from at least two different states (e.g.NSW,Queensland) to demonstrate that you can link the image map.

Challenge 8: An accessible form with style

Certification and standards:Cert IV Website Qualifications in Australia,Australian Qualifications,Web design qualifications

Since we may not yet know how to process the information on a form, for the moment just use the form attribute action=mailto: to send yourself an email (modify with your own address).

PHP:Simple functions in PHP,Dynamic websites,PHP challenges,Dynamic websites with PHP,Generating a receipt with PHP,Responding to HTML forms with PHP,

add an attribution for your image and text (a link back to the original photographer, author or source of your image and text)

Save your code as images.html and link to your new page from your index page.

And of course, all your pages should validate.

Challenge 7: Some advanced table features

Design:Accessibility,Design Principles for Web Design,Design Suggestions

OK, lets get started! This first challenge builds on the skills you developed inWhat is HTML, h2h1

Tables can get quite a bit more stylish (and accessible) than the previous challenge! For some examples ranging from no-style to pretty tables, check outFluidMinds Styling tables with CSS.

Find a copyright free image on Flickr usingFlickrs Creative Commons section. Download the pic into an images directory and then write up a page that includes the image on the left hand side, along with a heading and some descriptive text (perhaps fromWikipedia). The text and heading should appear to the right of the image, and wrap around the picture. For bonus marks:

As always, validate your page to make sure youve got everything in the right place.

Select drop-down boxes (for State, or within your questions).

Add some links to and this HTML challenges page (dont forget the

A large text area for comments at the end.

Challenge 3: Tables for tabular data

You should be able to explain how the html for the image map works.

Copy-n-paste the following html into a new text-file (in Notepad or your preferred text editor) and save your file with the namehtml_challenge1.html.

Work throughVeerles CSS Styled Tabletutorial, trying it out as you go (youll need to download the provided images). To do this you will need to know how the basics of how to use CSS – seeHTML Dogs Basic CSS tutorialfor more information.

Open up your HTML Challenge 3 – Tables for tabular data and save it as challenge7.html.

Apply the styles from your example to your own table (this should only require a few changes to your markup!)

a href=anchor local link/a

so that your page looks like the one in the image!

Project management:An introduction to Project Management,Developing a Client Project

You shouldnt need to add any bold to get your heading looking like a heading.

oh, and youll need to add a submit button!

Once you are happy with your work (and have checked it in your browser), read throughParagraphs and Headingstutorial over at Wikibooks and compare your markup! Make sure you chat about the decisions you made with someone around you if possible!

An example of a form with some style applied

Once you have your form displaying, well take it one step further by adding some accessibility:

Challenge 4: Lists, lists and more lists

Once youve got your beautiful table working from the example,

For this challenge, you might want to refer toHTML Dogs Beginner tutorial for Forms.

Professional development:Contribute to personal skill development and learning,Useful Applications,Useful Books,Emerging Technologies,Using the Internet as a Learning Tool

Publishing:Getting Your Site On the Web

Challenges:Web design,,AJAX,CSS,JavaScript,PHP,XML,Information Architecture,Algorithms

There are 3 lists on the page: a definition list, an unordered list, and an odd looking ordered list. Hint: To re-create the ordered list youll need to add a type attribute to each LI tag. Note that adding this attribute will make your code not validate as HTML 4 Strict, but it can be replaced later when you start working with Cascading Style Sheets.

Challenge 4: Lists, lists and more lists

Its important while doing these challenges to not think about how the page will be displayed yet, but instead focus on creating meaningful mark-up!

!DOCTYPE html html head title/title /head style type=text/css ipsum height: 1000 /style body

Activities:Web design group learning activities,Pen and Paper HTML activities,A Web Design Quiz show,Ordering Tasks for a Web Project,Paired Bio Pages,Scoping a Small Project,Emerging Technologies Research Activities

For this challenge, you might want to refer toTizags list tutorial.

Leave a Reply