Cloud R. Cert Prep

I remember that HTML stands for, "Hypertext Markup Language." It is a language used for creating web pages (CSS included too!). HTML Elements are a piece of a website, marked by a start tag and often closed with an end tag. HTML Tags are The special set of characters that indicates the start and end of an HTML element and that element's type.

What I have learned in each Domain:

DOMAIN 1 (HTML Fundementals):

To start off, HTML is a "markup language." HTML defines document structure. In this domain, I learn how to markup text using HTML Tags, and learning what these Tags can do. Be sure to remember that ALL tags start with an "<_____>" (the empty space is the specific tag you are putting within the angle brackets), and (Be sure to note some tags do not need to end with the name of the specific tag you are using! You just need to finish it off with a "/>") ends with a "</_____>." Take for example a "Body" tag, you start of with a "<body>" tag, but at the end, you finish it off with a "</body>" tag.

Specific HTML Tags:

Other Useful Facts:

Every "/" at the end always indicates that you are closing that specific tag.

Your "Title" in the heading of your HTML displays as the title on the Window Tab (basically the website name). Without it, the title on the Window Tab will just be labeled as, "Untitled." That is how your page will show up in a search engine.

Metadata is often describes as data describing data. Metadata can include things such as character types, keywords to help with search engines, & provide ways in which different device types should render web pages.

The character set, "UTF-8" is a unicode set that supports characters 1 to 4 bytes long, and is the default setting for HTML-5 as it supports all basic characters. If you were to have a website that has Latin, Cyrilic or Chinese characters, you would want to use the "UTF-16" character set.

In HTML code, most tags (as I've said before) have an opening and closing tag, a few tags however do not technically need closing tags. These tags are known as "Void Elements" in that, they are self-contained (or in some cases, contain no data at all). To determine which tags are Void Elements, let's use the Title tag as an example, you can see how the Title tag has a "<title>" at the start, and ends with a "</title>" meaning you are telling the browser that you are done with the Title. However, with the Meta tag, you can see how it starts off with a "<meta" and ends with only just a "/>" this is a clear distinction on how you can tell the difference between a regular tag and a Void Element.

An "Entity" is little pieces of HTML code that display symbols and characters.

With building web pages, sometimes I may often want to put placeholders for text that will need to be added later. Another way to explain this is how sometimes, I may just want to put explanations in for parts of a web page that do not display in a browser, but will show in your text editor. This is what's called a "Comment." This will help in any collaborative efforts in building a website. To creat a comment, start with this, "<!--" and end with a "-->" comments can also take up multiple lines too.

HTML's Symbols and Entities:

(just get rid of the spacing in each Symbol) Symbol:

  1. "& lt ;"
  2. "& gt ;"
  3. "& amp ;"
  4. "& copy ;"
  5. "& nbsp ;"
  6. "& quot ;"

Entity:

  1. Less than symbol (<)
  2. Greater than symbol (>)
  3. Ampersand (&)
  4. Copyright (©)
  5. Nonbreaking space
  6. Double quotation (")

Remember the big 4 every HTML file is: DOCTYPE, HTML, Head, & Body.

DOMAIN 2 (CSS Fundementals):

CSS, are also known as "Cascading Style Sheets." CSS define document formats. In this Domain, I learn the use of CSS, and what it can do. CSS is a computer language for laying out and structuring web pages (HTML).

The best practice for style sheets:

The 3 Different Style Sheets for Web Pages:

  1. External Style Sheet
  2. Internal Style Sheet
  3. Inline Style Sheet

Specific CSS Tags/Rules:

CSS Styles/Properties:

Other Ways to Create Styles:

New HTML Tags I learned:

As when to use each style sheet, we need to understand the cascading part of cascading style sheets (CSS).

When creating and applying an external style sheet, you click on create a new file, name it however you want, but be sure to end the name with a ".css" that way, the program knows you are wanting to create a CSS file specifically. You can see this with previous HTML files, the names of each file always ends with a, ".html"

Upon the creation of your CSS file, you are automatically (if not, you should put this first in the file) a Body tag with two curly braces by default. Here, I just style the Body tag and can change the "font-family" however I want. To link this CSS file with your HTML file, go to your HTML file and in the heading, you will type this exact piece of code "<link rel="stylesheet" type="text/css" href="________.css" />" the blank space is just whatever name you gave that CSS file.

Now we really want to get into the cascading aspect of CSS. So you must be sure that you know the precedence order for external style sheets, internal style sheets, and inline sheets.

Internal style sheets take precedence over External style sheets for the same tag and property. An example of this is if you were to type a color change property for the "p" tags in your CSS file (External style sheet), but if you were to type a Style tag in your HTML file and type a color change property within that tag (Internal style sheet), the Internal style sheet will always take precedence over the External style sheet. Inline style sheets take precedence over Internal style sheets AND External style sheets for the same tag and property. An example is when you style a specific "p" tag in your HTML to a certain color, the style you typed for the Internal & External style sheets will be overridden by the style of the Inline style sheet, even if there is a different color from the Internal & External style sheets, the Inline style sheet will always override both. So here is the order from which style sheet takes precedence first to last

  1. Inline Style Sheets
  2. Internal Style Sheets
  3. External Style Sheets

A "Rule Set" in CSS is a combination of a selector which can be, a tag, class or ID, and the property & value pairs set in the style sheet. Any styles that you decide to add is within the curly brackets of a tag in your CSS file. You have pairs of properties being changed, and values they are set to.

To end things off, remember that styles can be applied to Tags, Classes, and ID's. Classes can be applied to ANY tag. ID's should only be applied once per page.

DOMAIN 3 (Document Structure Using HTML):

Let's start with talking about some detailed usage of HTML Tags, the most important takeaway for you here is to understand when you would use each of these tags, some you will use often, and some you will hardly ever use. But any tag within Domain 3 is a possible exam question (MORE STUDYING! HOORAYYY).

PART 1 -

For any information in rows and columns, "Tables" are a good way to layout the information in an organized fashion. As a fun fact, many years ago, tables used to layout entire web pages. But now, CSS offers more flexibility in laying out a web page.

Table tags are an HTML structure for creating rows and columns on a web page. For video 1, the important pieces to learn are all the different Table tags.

New HTML Tags I learned:

Semantic Tags I learned:

There is more to building tables than just using the "Table" , "tr" and, "td" tags, you may want a header row on your table. You may want to do some table formatting. Though you should use style sheets to do most of the formatting, there are some basic attributes that you can add to existing table tags.

New Attributes I learned:

Now we are going to look at the first of two types of list we can use to structure content on a web page.

Different types of HTML Lists:

About Images:

Now you might be wondering, how do we add images? The answer is, you don't. You cannot simply just add it by inserting it. To make an image apart of your web page, you really just link it from a web page to a stored location. So for any image link that you add, you will want to occasionally check and make sure the link still work.

Now for any image, "alternate text" should be added for two reasons. First, if the image does not display, at least some text will be there to explain what the image was supposed to be. Secondly, screen readers use alternative text, to read text to those who need assistance with finding you what's on web pages.

PART 2 -

HTML links are known as "hyperlinks" you can click on a link and jump to another document. One of the tags used to create hyperlinks is the "a" Tag (you can find info of it back on Domain 2). One design rule in websites is to keep people on your website as much as possible.

In addition to adding hyperlinks to navigate to web pages, you may want to control how a web page loads once a link has been clicked! Continuing on from that one design rule, one way to do this, especially for hyperlinks that go out your website, is to set the "Target" of a hyperlink to open in a new window (aka a new Tab).

Another feature of hyperlinks, specifically the "a" tag, links to a specific spot on a web page. This is known as a "Bookmark"

New Attributes I learned:

Specific Links in HTML and their Purpose:

Most of the hyperlinks that you'll create to link from page to page within a website, are what we call "Relative links." For example, look at "33d-spotlight.html" (or really just go to video 24, and go to time-stamp 0.06) and take a look at the hyperlink that is within the Home, down below in the HTML. The hyperlink leads to the index.html within Domain 3's folder. This really only works because of how each of these files are within the same folder. If it were not, then it won't work. But to solve this, you know that most external links will not be in the same folder as the current HTML you are in. For this, now you will need an "Absolute link" which contains the complete address to the link. You can add an Absolute link to a text with, let's say for example, a wikipedia page, so just copy and paste the full link from the window of the wikipedia page and paste it within an "a" tag with the "href" attribute.

Friendly reminder, when you create an external link, most of the time you will want to make sure you set that target to have the link open in a blank tab (use "_blank"). This is because of the GOLDEN RULE OF HYPERLINKS!!!! And that is to keep people on your website as much as possible.

New HTML Tags I learned:

With linking a Map element to the image element, no changes will happen with the web page. The reason might be because you haven't defined any selectable areas, so the web page will remain unchanged.

An input form is a part of a website where you can type in information, like when you fill out a survey or apply for something online. Things like access keys and tab index help you move between the boxes on the form using just the keyboard instead of a mouse. This makes it easier for people who have trouble using a mouse to use the website.

Exam Tips given in the Videos:

FYI, just to let future me know, I do NOT have all the Exam Tips given in each Domain, so if anything, actually go and watch the videos to study. (Here's a TIP to make your life easier, just go to the final video in each Domain, that video is usually what you must truly study on)

FOR THE EXAM! You will want to make sure that when referencing links or images, you know the proper code to navigate DOWN a folder path and the proper code to navigate UP a folder path. If you have familiarity with navigating folders in a command prompt, this should look at least somewhat familiar.

Remember that the Map tag defines an image map using one or more area tags. That image map is then linked to an image, creating sperate selectable areas on an image that act similarly to standard hyperlinks.

There is no need to be an expert in coding form Submission Scripts for this exam. But just know the most common Submission Methods and how they operate. Here are some Submission Methods:

PART 3 -

An important factor to take into consideration when building a form is accessibility. Specifically, we want to make form fields more accessible to those who struggle to use a mouse. Two ways we can do this are through adding an "Access Key" and a "Tab Index."

There are a few different ways in which we can allow users to input information on a form. Each input is defined either through a tag or combination of tag and attribute. There are a number of input methods on the exam. The input methods you will need to know about the exam include:

  1. The "Input" tag, which has many attributes, such as:
  2. The "Select" tag, is used to generate a drop-down list, has attributes such as:
  3. The "Textarea" tag, is used for entering multiple lines of text.
When building input fields, a best practice is to add a label tag prior to the input field. This allows a user to click on the label, the text next to the field name, and have the cursor move into the accompanying field.

New Attributes I learned:

The Significance of Labels:

Without the label tag, the user would have to click directly in the form field.

This may sound insignificant, but consider how many users today are on mobile devices and smaller screens.

Most studies estimate that 50% or more of all internet traffic is from mobile devices.

The "label" tag also improve the experience for users utilizing screen readers.

When a user focuses on a form field that has a label, the screen reader will use the associated label tag to read the name of the field out loud.

So why do we use the "label" tag? ACCESSIBILITY!! For these reasons, input tags should ALWAYS be accompanie by a label tag.

New HTML Tags I learned:

We just covered a lot of tags that is the essence of HTML! Taking text and marking it up with tags, so a web browser knows how to display a web page.

Exam Tips given in the Videos:

It is not important to know how to script a button, but it is important to know how to use the button tag.

As you learn these HTML tags, put them into groups. There are four tags we learned in this Domain:

This is just to make it a little easier for you to keep track of which tags go with which group.

Structure: Know all the basic HTML tags. More importantly, know when you would use these.

Semantics: Understand that most of these do not change the appearance of your web pages, but they help define the web pages.

Navigation: Set the "a" tag for hyperlinks and know how to set targets and bookmarks.

Forms: Know the different input types, know how to add accessibility attributes to form fields, know how and when to create a data list, and know the purpose of a fieldset.

The overall exam tip for this domain is simply this, know when you would use these tags and know what kind of code you would use given a scenario.

DOMAIN 4 (Multimedia Presentation using HTML):

Adding multimedia to a web page, used to be a taxing task. With HTML-5, adding multimedia is easy. As you learn how to add video or audio to a web page, make sure you see which formats can be used for web pages and which ones cannot.

In Domain 4, we will be reviewing what we have learned previously on adding image tags and it's attributes, and look at ways we can control a page layout with images. We'll also see how to create a hyperlink on an image. As you go to add images onto a web pagem you'll want to know what those image dimensions are, so you can scale the image accordingly. Just remember that the more you scale an image, the lower the quality of that image gets (especially if you scale the image to a larger size than its original).

About Images:

(this is just taken from another previous Domain, I just brought it back due to how this Domain is somewhat about images)

Now you might be wondering, how do we add images? The answer is, you don't. You cannot simply just add it by inserting it. To make an image apart of your web page, you really just link it from a web page to a stored location. So for any image link that you add, you will want to occasionally check and make sure the link still work.

Now for any image, "alternate text" should be added for two reasons. First, if the image does not display, at least some text will be there to explain what the image was supposed to be. Secondly, screen readers use alternative text, to read text to those who need assistance with finding you what's on web pages.

New HTML Tags I learned:

New Attributes I learned:

When trying to get images to line up in rows and columns, we should use one of two methods. Either a Table or through CSS.

Adding a hyperlink to an image involves using the same tag and attributes, as is the case with adding a hyperlink around text. We'll still need the "a" tag and a hyperlink reference. The key is to surround the image tag with the "a" tag, and not the other way around.

Within Domain 4, I have learned how you can have more than one soutce specified for video format. The 3 most common video formats you'll see are:

Though these are the most common video formats, many other video formats are supported. The most important thing you can do is test the formats you use across multiple browsers.

Exam Tips given in the Videos:

For this exam, you need to know how to add an iframe tag and know what it does, not how to programmatically change it.

One thing to remember as you practice studying for HTML coding (or just practicing in general), if the page displays the way you anticipated, you use tags and attributes perfectly! If not, look for a missing angle bracket, a misspelled tag, or a typo. HTML code does NOT show alert messages when there is an error. The only result you have to go by is the web page itself. So finding errors takes good proofreading skills.

Be sure to know the proper way to display an image.

Be able to set the width, height, and alternate text for an image.

Be able to add a hyperlink to an image.

Know how to implement a video with controls.

Be able to implement audio with controls.

DOMAIN 5 (Web)

Earlier, we dived into the basics or CSS. Now we want to dive into the details and see how we use CSS not only to format text, but to also position text on a page.