So what is HTML? • Anatomy of an HTML element • Nesting elements • Void (Empty) elements • Anatomy of an HTML document • Marking up text (Headings, Paragraphs, Lists) • Links
defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities.
In order to meet the varying needs of this audience, several layers of guidance are provided including overall principles, general guidelines, testable success criteria and a rich collection of sufficient techniques, advisory techniques, and documented common failures with examples.
Perceivable —means to sense or have an awareness of something.
Content models (block and inline flow, root element, document metadata, inline text semantics, text content, table conent, image and multimedia, interactive elements, content sectioning, obsolete and depricated elements)
Textual content (headings and paragraphs, emphasis and importance, italic, bold, and underline, quotations and citations, abbreviation and definitions, contact details, superscript and subscript, computer code, time and date, demarcating edits, block quotes and preformatted text)
Semantic content (non-semantic wrappers, line breaks and horizontal rules, page regions, grouping content, articles and sections, figures and figure captions, ordered, unordered, and description lists, table data structures)
3.1. Complete the "Structuring a page of content" (birdwatching) project
READ through the project Structuring a page of content on MDN web docs site, including sections: Starting point, Project Brief, Hints and tips, and Example.
Create a new directory (folder) in your C:/public_html/syst10049/ local directory, called week04.
Copy your site_template project (created in Week 3) to week04.
Rename the copied project to birdwatching
Download and unzip the file assets.zip. NOTE: if this link does not work, use the "zip file containing all the starting assets" in the "Starting point" section of the MDN page! DO NOT STORE the ZIP file in your local webspace and never upload to the server webspace.
Store the index.html file in the C:/public_html/syst10049/week04/birdwatching/ directory.
Store the style.css file in the C:/public_html/syst10049/week04/birdwatching/css/ directory.
Store the remaining files (.jpg and .png image files) in the C:/public_html/syst10049/week04/birdwatching/images/ directory.
Using VS Code editor, modify the index.html
change all relative URLs to images by adding images/ in front of the image name. For example, <img src="dove.png" alt="a simple dove logo">
will beocme <img src="images/dove.png" alt="a simple dove logo">
add structural elements as specified in the "Project brief"
Complete the remaining tasks from the site_template exercise, including test, validate for valid HTML, validate for accessibility, and publish.
Reflect on what you have learned, identify area that you need to study further.
3.2. Create a project Blog Articles (single-page)
Create a project sub-three C:/public_html/syst10049/week04/site_blog_one
Update <head> section of each document to match the site_template/template.html
Change chapters to articles; Choose a title for each article and add a byline of your choice; include the jumplines to top and bottom of the page Example (img, jumpline, byline) ; otherwise you can use the same content.
Add appropriate documentation. Test, debug, validate, and publish.
3.3. Create a project Blog articles (multi-page)
Create a project sub-tree C:/public_html/syst10049/week04/site_blog_many
Use the previous project content. In this version, each article is treated as a separate secondary page, and each page contains main navigation, including the home page. include the jumplines to top and bottom of each page (probably not needed on the home page, if it is short enough to fit "above the fold" —visible part of the web page without the need to scroll down, content that appears when user scrolls down is called "below the fold" (comes from the traditional newpapers being sold folded);
On the home page, you can add a paragraph (or two) explaining what the site is all about and how to navigate it.
Add appropriate documentation. Test, debug, validate, and publish.
3.4 Create a project Explore Media (multi-page)
Create a project sub-three C:/public_html/syst10049/week04/explore_media
