HTML Essential Training

  1. HTML

    • The role of HTML: HTML means HyperText Markup Language, and is more resilient than the other two; CSS means Cascading Style Sheets and is more fragile than HTML, but more powerful; JavaSript helps to make the site much more seamless and professional than HTML and CSS, is much more powerful than either one, but won't work if there is a mess up.

  2. Formatting Text

    • The syntax of HTML elements: All HTML elements have an opening and closng tag; HTML elements can be nestled inside one another at once.
    • Paragrahs: use the opening <p> and closing </p>.
    • Headlines: help breakup text in a paragraph on a web page, and there are 6 levels of headlines <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, and can be used depending on how you prefer your websites.
    • Bold and italics: There are two types of elements for italics and bold, italics is <i> and <em>, bold is <strong> and <b>.
    • Lists: There are three kinds of lists: unordered lists <ul>, ordered lists <ol>, and they have <li> which is a list item and it could change design depending on what kind of list you are using, and definition lists <dl> which has a term <dt> and a definition <dd>.
    • Quotes: If you have any quotes in your web page then you use a <blockquote> to seperate it from the rest of the paragraph. Inside of the blockquote, use a <p> tag for the quote part, then use a cite tag <cite> for the person or company that made the quote. There are some quotes that are just typed into a paragraph, so you can use the quote tag <q> to tell the browser that it is a quote.
    • Dates and times: If you have to put in a date or time use the time tag <time>, to make sure the computer knows what date to save or something else use, the datetime attribute (datetime="") but it needs a specific format in order for computers to understand it, for the date it needs yyyy-mm-dd and for the time it needs to be written in the 24:00 hour format.
    • Code, pre, and br: If you need to type a bit of code into your website without activating it then you could enclose it in code tags <code>, &lt (<), &gt (>) and &amp. The <br> tag is helpful for putting line breaks where you want them. The <pre> tag is helpful for peoms and other things that have irregular spots on a page.
    • Superscripts, subscripts, and small text: Subscripts <sub> are text set below the normal text line, Superscripts <sup> are set above the normal text line, the <small> tag helps with stuff that doesn't have a lot of meaning but is still important.

  3. Understanding the power of HTML

    • Debugging HTML: Every broswer has a debug tool that you can use to debug your code and look at other peoples code to help you structure your code better.
    • HTML Attributes: Global attributes are attributes that can be used by any element; examples are: classes: which has a style you can give to any element, id: is similar to a class but can use a name once only, cententeditable: allows the user to edit the content, lang: tells the browser which language it is in, dir: tells the broswer which direction the text flows.
    • Aria roles: are attributes that provide accessible information about that specific element. ARIA also provides tools to make the site accessible to everyone.
    • Formatting HTML: Comments could help remove things that don't work and can explain what is going on; people use lowercase more than uppercase when typing in elements. Most elements have closing tags and some don't have one.
    • Weird Characters: There are other elements that could be used to replace the characters on a webpage that you want the browser to display, examples are: &copy ©, &trade and &star (the one's in bold most likely don't work on some browsers). There is also a nonbreaking space: &nbsp, that can be used to tell the browser to not break the line.

  4. Images and Graphics

    • Images: There are 4 main attributes for a image: src attribute, alt attribute, width and height attribute.
    • Image formats GIF: is good at compressing large areas of a singe color, limited color space of 256, can do transparency, with jagged edges, can have multiple frames and can make a little movie; SVG: is a vector image which can get any size but it won't affect the quality; JPG: is good for compressing photos, but they are HUGE and need to be compressed first otherwise your website will run sloooow. PNG: is a newer style of image saving, it can have images that can be transparent, good at compressing, and can do a better job than gif and jpg on images and photos but not always.
    • Responsive formats There are ways that you can have a broswer use a different sized image of the same image for different devices that have small screens and large screens; You first modify the image with copies of the original with different sizes depending on what kind of screens you want to view it, then use srcset then type in the same image name but with the different screen sizes next to it like 1x, or 2x.
    • Responsive widths: For the responsive width, instead of the 1x, or 2x, you can say how wide each image is. The size attribute will help the broswer figure out which image size to use.
    • Responsive pictures: You can use the <picture> element to modify the image however you want it to look on a computer/phone.
    • Figure, figcaption: Figures (<figure>) also help you modify images but they can also be worked with figcaptions to add a caption.

  5. Media

    • Audio: use the <audio> tag to put audio in a web page, it also has a src attribute, a controls attribute, a loop attribute with the autoplay: which allows it to start playing once the site is all loaded and it can start over once it is done. There is also source elements for different audio files too; mp3 is the most common audio, ogg is not as common, but had some advantages.
    • Video: the <video> element is about the same as the audio element but with differences: mp4/H.264 is a codec save option for videos, AV1 is the new main codec for the videos files but we are still usng mp4 along with webm, we also use the type attribute so that it helps the broswer know what kind of video it is.
    • Captions and subtitles: to add captions, use the <track> element and save the video with the .vtt extension. there are 4 attributes that go with the element: The kind: tells us what kind of file this is, label: is the label for the captions when the user turns them on, srclang: the src's default language, and default: which is the default settings for the video.
    • Embedding other media through iframes: embedding is placing content from one site onto another one.

  6. More ways to identify content

    • Supporting languages: the <lang> attribute for the <html> opening tag is helpful for the site to know which language it is in; the dir attribute helps the broswer know which direction the text should go; the charset attribute goes in the head element and specifies, what and how many, kinds of characters there are.
    • generic element: div and span: the <div> element is a block-level element and it does the same thing as the <span> element: nothing unless they are CSS'd. The <div> and <span> tags can also use the global attributes: class, id, lang, aria roles.

  7. Putting it all together

    • The HTML page: Any time someone goes to a web browser and types a URL no matter how jumbled the files are, it takes you right to where you need to go; all HTML files MUST start whith the <!DOCTYPE html> declaration, because it specifes what era this file is from, then we put down the opening and ending <html>, </html>, the head element stores all the meta data that is needed, and the body element stores ALL the elements that make up the web page.
    • Document head: it stores the <meta> elements along with the <title> element; there is also another meta element that can help a website be shrunk down to fit a phone screen <meta name="viewport" content="width=device-width, intial-scale=1">, along with another <meta> tag that can provide a description for the page on a browser, along with more <meta> tags. There is also the <link/> element which can link your page to a bunch of assets that would load, the rel attribute tells the browser what kind of asset it is, and the href attribute provides the url to the asset. If you have a javascript file for this webpage then you can load a <script> element for it.
    • Structuring content: There are 6 major elements for the webpage structure: <main>, <header>, <footer>, <article>, <section>, <aside>; <main> is used once and wrapped around the main content of the page; the <header>/<footer> elements are used to mark where there is a footer and a header for a page; the <article> element is used for an article in the page like a long biography or something; the <section> element is used to wrap around a group of elements in the content; the <aside> element is used to mark content that is off to the side or not as important

  8. Forms and Interactive Elements

    • HTML form basics: Use the <form> element to add forms then add the action and method attributes, and then put the <label> element to specify what we will input then use the <input> element to add an input icon to put a name or something, along with the name attrbute to specify what it is, then use a button element for the user to click to signify that he is done.

  9. Structuring Table Data

    • When to use tables: Use tables only for tabular data NOT for structuring a web page
    • Building table rows The table element code is as follows: <table>: the table itself, <tr>: table rows,and has the attributes: colspan, rowspan, and headers; <th>: tabe headings, attributes: colspan, rowspan, and scope <td>: and table data