Objectives:

1. Introduction to HTML (markup language vs. markdown)
2. Activity: simple webpage with text, links, images
3. Semantic structure & accessibility
4. Activity: # (bypass block, permalink), alt-text
5. Discussion: decorative images

HTML is, as you know, a hyper text markup language. What it means by markup in this context is close to a print-markup (=the process or result of correcting text in preparation for printing). You will make the text ready to publish internet by using special markups. As you can guess, the html was a dream of writers and publishers - to share the document through new media (= computer) between the readers and between the contents. It is adding additional information or quoting the contents - ultimately make the story richer with non-linear structure. Two stories you may want to check about the origin of hypertext - Ted Nelson's long project Xanadu, and CERN's development of WWW.

The Curse of Xanadu - Ted Nelson's Xanadu project by Gary Wolf, Wired, 1995 or printed text only version

Short History of HTML/HTTP/WWW by Berners-Lee

The original html was, therefore, for the publication of the newspaper or a book online. Basically, you may want to make a title bigger than the other plain text. For example, the texts in the below look pretty similar as a text itself.

Part I
Some Non-human Robots
I am not having the robot stories appears ini the order ini which they were written. Rather I am grouping them by the nature of the contents. In this first division, for instance, I deal with robots that have a non-human shape - a dog, an automobile, a box. Why not? The industrial robots that have come into existence in reality are non-human ini appearance. - Quote from "The Complete Robots" by I. Asimov.

But, if you add markups like <h1>, <h2>, or <p>:

<h1> Part I </h1>
<h2> Some Non-human Robots <h2>
<p> I am not having the robot stories appears ini the order ini which they were written. Rather I am grouping them by the nature of the contents. In this first division, for instance, I deal with robots that have a non-human shape - a dog, an automobile, a box. Why not? The industrial robots that have come into existence in reality are non-human ini appearance. - Quote from "The Complete Robots" by I. Asimov.<p>

The texts will look different:

I am not having the robot stories appears ini the order ini which they were written. Rather I am grouping them by the nature of the contents. In this first division, for instance, I deal with robots that have a non-human shape - a dog, an automobile, a box. Why not? The industrial robots that have come into existence in reality are non-human ini appearance. - Quote from "The Complete Robots" by I. Asimov.

This site shows the list of the tags used from the original html (html1) and how they evolves to upper version of html (currently html5 is latest).

cf. Markdown language is simply put, simplified and easy to use version of html (markup language). It is a quick, flexible, and shorten form of html - and it can process the html code as well. Many documentation tools(?) including this github and jupyter notebook offers markdowns. For those who many want to test and learn markdown in github, this is the basic markdown syntax.

Let's apply some formatting and change the text easier to read. What is the main issue when you publish the texts as html? What is the main difference between what you see in the code editor vs. what you see in the browser (.html)?

I guess what you may have found it uncomfortable is about spaces -- all the texts are connected without line separator.

• You can use <br> to break the line, make a new line, and move to the front for the next input.
• <hr> can be used as a visual separator between the section, adding a thin line
• any consecutive space and tab inputs from the keyboard are considered as one space (and any others will be ignored), if you want to use several spaces, use   -- I would remember this as nothing-but-s-pace.

We are so accustomed to have hyperlink - use the text to visit a certain page/media/telephone_number/e-mail_address, or anything that can be url. a is for anchor, an anchor fixes the location of one or both ends of a link, like a boat anchor fixes the end of an anchor line to the sea floor. Because early days in www, the metaphor from navigation (of the ship) was often used - an ocean of information.

You will wrap the text up (surround the text with the tag) when you use html tags. That means, when you open the tag, like <a> then, after the text you want to put the markup, you need to close the tag </a>. Using / is the rule to indicate "close" the tag. So, the example of adding hyperlink would be like this:

• First, you will have the text (Getty Museum Website) to use as an anchor. It can be anything, from even one_space to the paragraph, or image unless your open-close tag is not mixed up with other open-close tags.

• Second, you will have the url of where to visit. It usually starts http:// or https:// - but you can use only the filename when you want to open/connect the local file (which means the current folder/directory/repository where you have your working html file)

• then, put <a> before the text and </a> after the text

• specify where to go inside <a href="URL">

• if you want to open the new site/page in the separate browser window or tab, add another attribution target and set the vale as _blank -- which means <a href="URL" target="_blank">

  <a href="http://www.getty.edu" target="_blank"> Getty Museum Website </a>

For details of <a> ... </a> tag: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href

Let's add some nice pictures too. This time, the screenshots of the audits. You can use <img> tag for now.

You need to have the url of the image you want to show. If you are for sure to have the image in the same directory as the working html file, you can use the file name as the url.

I asked you to upload the screenshot images of the audit -- then, we can find the url of the image. Here is how:

• supposed that your published repository/assignment01.html can be found here https://ux-ui-design-lab.github.io/DH150-UX-WebCoding/assignment01.html

• if your image files are in the same directory, you can replace the last part of file name with the image file name (ex. museum-getty-research-audit.png). and test - https://ux-ui-design-lab.github.io/DH150-UX-WebCoding/museum-getty-research-audit.png >> if it works, this is the url you will test <img> code with.

• for img tag, you will use src to put the image url

• if you want, you can use attribution height and width to adjust the image size

• because image is an independent embedded object (like a horizontal line), it doesn't have open-close wrapping - so you don't need to worry about closing. If you have seen <img ... /> or <hr />, that is for xhtml (extended html).

• (FYI: your original repository can be found easily by rearrange the repository and file names -- https://github.com/UX-UI-Design-Lab/DH150-UX-WebCoding/settings/pages)

   <img src="https://ux-ui-design-lab.github.io/DH150-UX-WebCoding/museum-getty-research-audit.png" width="500">
  

For details of <img> tag and the graphic image file format each web browser supports can be found here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

Activity01: Revise your assignment01 by adding <br> or <hr>, hyperlinks with <a>, and screenshot images by using <img>. Save your html as activity-week02-1.html and upload it to your github repository (= the same repository as assignment01.html, so you can find the url easily). Find the URL and share it via CCLE forum.

In html (and other programming languages), it is useful to clearly organize the contents for their structural/functional meaning, so that later others can understand how to use that part of code. The benefits of semantic structure are cited from MDN:

• Search engines will consider its contents as important keywords to influence the page's search rankings (see SEO)
• Screen readers can use it as a signpost to help visually impaired users navigate a page
• Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes
• Suggests to the developer the type of data that will be populated
• Semantic naming mirrors proper custom element/component naming

It is metaphorically like building a house with information - you will setup your territory and the basic materials, you will use html and the most recent version. Therefore, starting structure will be like this:

  <!DOCTYPE html>

It is to inform the browser to present html properly. For more information about DOCTYPE, https://html.spec.whatwg.org/multipage/syntax.html#the-doctype

Then, you will have a big area to build your house, that means <html> ... </html> - this is the territory of your house. Everything you want to declare and want to manage should be placed inside of this biggest tag.

You can initiate some places within your house, like some area for administer/management, let's say it is <head> office. Every external business should be done here, like business plates/signs, official language in use, links to the external resources to borrow, for example.

You can also have some room for interior designer or maintenance team, let's call the room <style> - sometimes people group this style into head, which can work, but I prefer to have it in separate part (so that part/department can spin-off for their own business easily someday).

And, you may need a place for the functional team, where you put your instruction for virtual assistant (or servant) what to do. In this context, I mean Javascript as instructions for browser's sub_functions (=servants or assistant, not visible but trackable via the dev. tool. Let's call it <script>.

Now, you really need a main space to live. This main <body> has the contents to be presented.

In sum, the structure, you will always have when you create html file is like this:

 <!DOCTYPE html>
      <html>
           <head> </head>
           <style> </style>
           <body>
           ...
           <script> </script>
           </body>
      </html>'

Depending on how thoroughly you want to organize the contents, you can use these [basic semantic html elements] elements(https://developer.mozilla.org/en-US/docs/Web/HTML/Element)

We want to focus on the content sectioning this week and may explore some more about text semantics next week along with CSS (styling).

If you recall how books or newspapers are organized by sections, you can easily grasp the idea of this semantic structure. The news paper has a big headline and some other secondary headline in front with some introductory paragraph. Let's think it as <main> of the contents - the most important and relevant information of the day (or the book). There can be some <section> -s in side of main - or if the contents is irrelevant to the main event, there can be some other <section> -s following. Each <section> may have several <article>-s. For example, today's headline (<main>) in NPR is the Miami-Surfside-condo-collapse. But there is no rigid structure/rule how you should organize the relationship between <main>, <section>, or <article>. It is up to the information architect, content strategist, or someone in charge ("chief editor") who make a decision which one can be pulled up as the important thing to show.

Besides, you may want to have <header> and <footer> to organize the information which may not the content(=news) itself but useful for the readers(=users) to understand the information and the structure. In <header> may contain some heading elements but also a logo, a search form, an author name. A <footer> typically contains information about copyright data or contact information. - so the footer, it may be useful to know how to add copyright symbol © + mailto: hypertext.

So, let's organize the html code of activity-week02-1.html by this sectional semantic structure. It may look like this (yours would have more contents).

 <!DOCTYPE html>
      <html>
      <head> </head>
      <style> </style>
      <body>

        <header>
          Web-accessibility project: XXX <br>
          DH150, 2021 summar<br>
          assignment01: setup and notes<br>
          <br>
          Awesome Student Name<br>
          <br>
          [short description]<br>
          This project is to test and improve a web-accessibility of the museums.<br>
          <br>
        </header>

        <main>
          [research]<br>
          I found these museum websites are interesting to investigate. I used Chrome Development tool lighthouse to diagnose the accessibility and SEO score of those websites. <br><br>

          <section>
            <article>
              1) <img src="https://ux-ui-design-lab.github.io/DH150-UX-WebCoding/museum-getty-research-audit.png" width=800><br>
              Getty Museum Research, <a href="https://www.getty.edu/research/tools/" target="_blank"> https://www.getty.edu/research/tools/ </a>, Accessibility (79), SEO (82)<br>
            </article>

            <article>
              2) website name, url (paste), SEO score (00)<br>
            </article>
          </section>
         </main>
          
         <section> some analysis statements </section>

         <footer> YOUR NAME&copy; 2021 | contact <a href="mailto:[email protected]"> [email protected] </a>

      <script> </script>

      </body>
      </html>

When you test it, you cannot notice any visible changes. But this structure will help you to add the hidden codes for accessibility and SEO.

Activity02: Once you are done, save the file as activity-week02-02.html and upload it to github repository. Then, using lighthouse in chrome dev. tool, run the audit for accessibility and seo for (1) assignment01.html, (2) activity-week02-1.html, and (3) activity-week02-2.html. What are the difference between them in terms of the scores? Is there anything you find it interesting? Share your scores (with screenshots) and thoughts in CCLE forum.

Sometimes you may have a big header - especially when you have logo images and splash video or image. Let's try it for fun.

One of the place you can find a high-resolution images is https://unsplash.com/ -- if you set the keyword properly, you can pull some random images but relevant to the topic.

• visit https://source.unsplash.com/

• scroll down to "random search term" copy the url https://source.unsplash.com/1600x900/?nature,water

• place <img> in <header> - save and test the preview.

    <header>
          <img src="https://source.unsplash.com/1600x900/?nature,water"><br>
          Web-accessibility project: XXX <br>
      ...
    </header>
  

• whenever you refresh the page, the image will be changed.

• change the keyword as you like, replace "nature,water" with your keywords seperated by comma (,) without any space. (ex. I put getty,museum)

• test again

For the accessibility, especially for the screen reader, the navigation turns to a linear form - it is unweaving like from the two-dimensional information (from the fabric pulling out the thread). With that reason, what we perceive as the condensed information can be spread out into a long-long-line. The issue is in visual processing, we organize the information and skim and skip the less important details, but in the audio form or linear storytelling, it is hard to foresee the story/structure to come, so that it is hard to skip or fast-forward.

But, once you know the structure and pattern to come, you can take a bypass. For example, the website tends to have heavy nav bar (with lots of menus just for jumping to) - or redundant information on header, and go directly to the main contents. Also, when the content ends, you may not want to review the footer over again - so skip to the top.

To make it possible, your webpage needs to have an identifier for each location to jump (like a postal address to find the unique place where the person lives). When the fragment of information within the webpage (one html), # (hashtag) is used in the webpage so the browser can scroll down to view this item marked with the specific ID. (cf. # can be used for color code in hex; this should not be confused)

You can assign the unique id in HTML by using id attribute like this:

 <section id="getty"> ... </section>

When you want to call this place, you can use <a href="#" rel="bookmark"> like this:

 <a href="#getty" rel="bookmark"> Museum01: getty </a>

In the same way, you can put "skip to content" on top and use it to jump to the contents.

 <body>
   <a href="#main"> skip to contents </a>
   ...

and at the beginning of the content (ex. <main>) add that identifier(ID).

   </header>

   <main id="main">
         [research]<br>
      ...

Q: Can you make "back to the top" in the similar way?

Try light-house audit again, can you see any changes? We can work more on the bypass blocks or this "skip" buttons/link when we work on styling (so hide when it is not focused).

Where the identifier is, you can make it as a perma-link. (but it is obviously calling itself)

   <main id="main"><a href="#main" rel="bookmark">#</a>

You can also add the title of the link (so people know where they would be directed to).

   <main id="main"><a href="#main" rel="bookmark" title="main museum analysis">#</a>

It is always helpful to distinguish the heading/title from the normal content. You can use <h1> for the biggest heading/title, and <h2> for the next biggest, and <h3> for the next biggest .. and so on till <h6> -- normally (and sometimes may not) <h3> is the similar size but bold to the default font-size (16px); <h5> and <h6> is used for captions or footnotes.

Try to wrap the title/heading text with any size of heading, h1, h2, h3, h4, h5, h6 - don't forget to close the tag like <h1> ... </h1>

Upload the saved file -- and conduct the audit again if anything improved.

(and you might be curious what <title> is about in the error message -- any idea?)

The next information you can add on is about the image. Simply put, when the contents is spread out, it uses only text. the images and other media is very likely skipped unless you have text-form information along with it. That additional text that would added on the image description is "alt-text". You can put the description of the image in alt attribute in <img>.

  <img src="https://ux-ui-design-lab.github.io/DH150-UX-WebCoding/museum-getty-research-audit.png" alt="getty research site accessibility score is 79 and seo score is 82"><br>

Well, what do you think about the random image in header? I can try this way:

  <img src="https://source.unsplash.com/1600x900/?getty,museum" alt="random images from unsplash">

It would reduce the number of errors about alt-text in audit. But... do you think it is informative and necessary?

So, we will have a short time (either discussion or debate) about the usage of the images in webdesign. There are so many websites that have the images just for decoration. Do we really need to use images just to give a good impression (ex. smiling consumers, peaceful nature ... for the financial service webpage)? Do we need to describe such decorative images to make the long-long linear story even longer? How detailed should we need to describe about the image, decorative vs. informative? What is good if we have such (decorative or informative) images? And what would you recommend to the ui/communication designers about the usage of images?

This would be activity03 - share your team's argument on CCLE.

NEXT: accessibility manual audits and advance topics of html (and friends and relatives of html).