Skip to content

Latest commit

 

History

History
542 lines (411 loc) · 30.4 KB

html_basics.md

File metadata and controls

542 lines (411 loc) · 30.4 KB

HTML Basics

Elements

In Html, Elements can contain either text or other elements (nested).Html closes unclosed tags by default when new tags are opened in the flow of the page (so be careful)

E.G:

<body> 
    some text
    <p>other element</p>
</body>

Note: h1 element tells the browser about the structure of your website. h1 elements are often used for main headings, while h2 elements are generally used for subheadings.[1]

Note: Web developers traditionally use lorem ipsum text as placeholder text. The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome. For more about lorem ipsum visist >>->.[1]

Images: 
<img src="images/firefox-icon.png" alt="My test image">

It embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.

We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:

  1. They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.

  2. Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:

Note: The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."

Note: All img elements must have an alt attribute. The text inside an alt attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.

Note: If the image is purely decorative (using an image as a graphic element for the design of the web page), using an empty alt attribute is a best practice.

Note: Ideally the alt attribute should not contain special characters unless needed.

Find out more about accessibility in our accessibility learning module.

Marking up text:

Headings

Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1>–<h6>, although you'll commonly only use 3 to 4 at most.

Note: You'll see that your heading level 1 has an implicit style. Don't use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO. Try to create a meaningful sequence of headings on your pages, without skipping levels.

Paragraphs

As explained above, <p> elements are for containing paragraphs of text; you'll use these frequently when marking up regular text content.

Lists

A lot of the web's content is lists and HTML has special elements for these. Marking up lists always consist of at least 2 elements. The most common list types are ordered and unordered lists:

  • Unordered lists are for lists where the order of the items doesn't matter, such as a shopping list. These are wrapped in a <ul> element.
  • Ordered lists are for lists where the order of the items does matter, such as a recipe. These are wrapped in an <ol> element.

Each item inside the lists is put inside an <li> (list item) element.

For example, if we wanted to turn the part of the following paragraph fragment into a list:

<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>

We could modify the markup to this:

```html
    <p>At Mozilla, we’re a global community of</p>

    <ul> 
        <li>technologists</li>
        <li>thinkers</li>
        <li>builders</li>
    </ul>

    <p>working together ... </p>
```
Links:

Links are very important — they are what makes the web a web! To add a link, we need to use a simple element — <a> — "a" being the short form for "anchor". To make text within your paragraph into a link, follow these steps:

  • Choose some text. We chose the text "Mozilla Manifesto".
  • Wrap the text in an <a> element, as shown below: 
    <a>Mozilla Manifesto</a>
  • Give the <a> element an href attribute, as shown below: 
    <a href="">Mozilla Manifesto</a>
  • Fill in the value of this attribute with the web address that you want the link to link to: 
    <a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>

Note: You might get unexpected results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address. After making a link, click it to make sure it is sending you where you wanted it to.

Note: href might appear like a rather obscure choice for an attribute name at first. If you are having trouble remembering it, remember that it stands for hypertext reference.

More Elements

HTML5 introduces more descriptive HTML tags. These include main, header, footer, nav, video, article, section and others.

    - main tag:

      The main HTML5 tag helps search engines and other developers find the main content of your page.

    - Link to Internal Sections of a Page with Anchor Elements:

      The a (anchor) elements can also be used to create internal links to jump to different sections within a webpage.[1]

      <a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

      When users click the Contacts link, they'll be taken to the section of the webpage with the Contacts header element.

      Note: IDs should be unique, But if there are 2 or more elements with the same ID, and that ID is used to create an internal link, the first element in the flow of the page will be choosen to jump to (the destination).[0]

      Note: Make Dead Links Using the Hash Symbol (#) in place of the link.

      Note: You can "make elements into links" by nesting them within an a element.

    - Input tag:

      input elements are a convenient way to get input from your user. 

      <input type="text">

      Note: input elements are self-closing.

      Note: Placeholder text is what is displayed in your input element before your user has inputted anything.

      <input placeholder="some text">

    - Form tag:

    • You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action on your form element.

      <form action="/url-where-you-want-to-submit-form-data"></form>
    • All inputs inside of a form are submitted to wherever the form goes to. By Default the form submits to the page that you are currently on.[3]
    • By default: when the enter key is pressed while one of the elements of the form is in "focus" -> the form is submitted immediatley.[0]
    • divs are used to seprate different elements of forms so that they don't be all on one line (because they are inline elements).[3][0]
    • Almost always when you build a form, you are gonna want your form to submit somewhere other than the page you are currently on & in order to do that, you'll need to add the atribute action -> the action is going to be where your form is submitting to.[3]
    • The next thing that you are almost always gonna specify on your form is the method you want your form to use -> that is gonna be: GET or a Post :
      • GET: is going to append things to the url and it is gonna send it to another page on the site
      • POST: is useful when you have a server and want to save some infromation

        • Note: browsers can only render GET requests.

      [3]
    • in order for an input to show out in a form URL, you must specify the name attribute.[3]
    • if you click on a label it should highlight the field that it's being labeled for, this is helpful for not only users but also for screen readers and in order to do this, you should set a for attribute to the element you want to highlight whenever you click on the label with a "value" of the id of the element you want to highlight.[3]

      • Note: Another way to associate labels with elements is by nesting the element inside of the label element.[3]

      Note: Most people use the for attribute method instead of the wrap inside method because it is cleaner and easier to style.[3] It is considered best practice to set a for attribute on the label element, with a value that matches the value of the id attribute of the input element. This allows assistive technologies to create a linked relationship between the label and the child input element.[1]

      Note: Most people use the wrap inside method with checkboxes and radio buttons.[3]

      Note: The defualt type of the input element is text, but you are always wanna be explicit in what type of input you are using.[3]

      Note: the type of email verifies emails for you by default. It also provides a keyboard specified for entering emails on mobile phones.[0]

      Note: the default behaviour of a button element is type submit. That type submits form to the server. if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

      Note: for button element the type="button", The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

    • to add a default value for a text input field you can use the value attribute.[3]
    • Adding a submit button to the form will send the data from the form to the URL you specified with your form's action attribute.[1]
    • Here's an example submit button: 
      <button type="submit">this button submits the form</button>

      [1]

    • all radio buttons need to share the same name which is how we know that there can only be one selected.[3]

      • Note: for all radio buttons, you need to specify a value, so when you submit it to your form, you know what you are getting back.[3]

      Note: All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.[1]

    • Each of your checkboxes can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the checkbox input with the label element surrounding it.[1]

      • Note: All related checkbox inputs should have the same name attribute.[1]

      Here's an example of a checkbox:

      <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

      Loving

      Note: It is considered best practice to explicitly define the relationship between a checkbox input and its corresponding label by setting the for attribute on the label element to match the id attribute of the associated input element.[1]

      Note: A label> element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.[4]

      Note: When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type radio and checkbox report their values from the value attribute.[1]

      Note: Only elements with name attribute are submitted.[1]

      Note: name & value pairs get submitted for each element. The radio input is affected by the name attribute.

      Note: If you omit the value attribute, the submitted form data uses the default value, which is on. So the value attribute needs to be set to something to identify the option.[1]

      Note: Best Practices is to enter name&value attribute-values in lowercase.

      Note: You can set a checkbox or radio button to be checked by default using the checked attribute.[1]

    • You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.[1]
    • For example, if you wanted to make a text input field required, you can just add the attribute required within your input element, like this: <input type="text" required>[1]
    • for full project: check the web-dev-simplified-form-project in the root of the repo.
    • another important element is the select element that represents a drop down menu.
      • <div class="eye-color">
    <label for="eye-color">Eye Color: </label>
    <select name="eye-color" id="eye-color" multiple>
        <option value="green">Green</option>                
        <option label="blue" value="blue"></option>                
    </select>
</div>

      Note: the multiple attribute allows selecting more than one option because the select element permits the selection of one option only be default.

    • another important element is the textarea element that allows entering multiline text.It is very useful for passages or paragraphs or editors.
      •  <div class="bio">
    <label for="bio">Bio</label>
    <textarea name="bio" id="bio" cols="30" rows="10">hello from the other side</textarea>
</div>

      Note: the value goes inside the textarea element not inside a value attribute.[3]

      Note: textarea converts all of the white space.So, if you have a default value for the textarea, you wanna make sure that there is no white space between the opening and the closing tags.[3]

      Note: when the form is submitted, the textarea is formatted so that all white space is converted to one charachter white space.[0]

      Note: select and textarea are the only two anomly type of elements that don't actually use the input for their element, so now let's go back to the.[3]

    • another really interesting element is the hidden (<input type="hidden">) input element. The hidden input element doesn't show on the page but when the form is submitted the name and value attributes are passed like any other input element.Users are not able to interact at all with hidden inputs.[3]
    • one of the most important types of input element is the type="file" which allows the user to upload files to server through a file picker dialogue.[0][3]

      • Note: for the input type="file" to be userful for the server you need to specify an attribute to the form tag called enctype with attribute-value of "multipart/formdata".What that does is simple "it tells the server that we are sending our form in multiple parts and not in one part" because files are very large, we can't send them in one part.[3]

Html in 3 words

  • Markup --> marks up content (helps in seo and other stuff like styling, controling the order of elements ...etc)
  • Structure --> builds the structure of a web page
  • Text --> text embeded in an html page

What Can People do with HTML[2]

  • Designers: can create more attractive and usable sites.[2]
  • Website Editors: can create better content.[2]
  • Marketers: can communicate with their audience more effectively.[2]
  • Managers: can commission better sites.[2]

How Html is used to create webpages[2]

  1. you start by writing down the words you want to appear on your page.[2]
  2. You then add tags or elements to the words so that the browser knows what is a heading, where a paragraph begins and ends, and so on.[2]

Html Best Practices

  • attribute scheme: type="" name="" vlaue="" id=""

Test Yourself

Why HTML was named HTML?
    • The HyperText part of HTML comes from the early days of the web and its original use case. Pages usually contained static documents that contained references to other documents. These references contained hypertext links used by the browser to navigate to the reference document so the user could read the reference document without having to manually search for it.[1]
What is the main Structure of any html document?
    • At the top of the document, we need to tell the browser which version of HTML the page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.
    • We tell the browser this information by adding the <!DOCTYPE ...> tag on the first line, where the ... part is the version of HTML. For HTML5, we use <!DOCTYPE html>.[1]

      • Note: The ! and uppercase DOCTYPE is important, especially for older browsers. The html is not case sensitive.[1]

    • Next, the rest of the HTML code needs to be wrapped in html tags. The opening <html> goes directly below the <!DOCTYPE html> line, and the closing </html> goes at the end of the page.[1]
      • <!DOCTYPE html>
<html>
  <!-- Your HTML code goes here -->
</html>
What is the importance of structuer in html?
    • In all kinds of documents, structure is very important in helping readers to understand the messages you are trying to convey and to navigate around the document (increases readability). So, in order to learn how to write web pages, it is very important to understand how to structure documents.[2]
How Structure helps readers understand the stories in the newspaper?
    • For the stories we read in a newspaper: for each story, there will be a headline, some text, and possibly some images. If the article is a long piece, there may be subheadings that split the story into separate sections or quotes from those involved.[2]
how offline structure is similar to online structreu?
    • The structure is very similar when a news story is viewed online (although it may also feature audio or video).
    • Example of a word document structure: a document might start with a large heading, followed by an introduction or the most important information. This might be expanded upon under subheadings lower down on the page[2]

      • Note: The use of headings and subheadings in any document often reflects a hierarchy of information.[2]

      Note: When using a word processor to create a document, we separate out the text to give it structure. Each topic might have a new paragraph, and each section can have a heading to describe what it covers.[2]

Why comments are very useful?
    • Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed to the end user.[1]
    • Commenting is also a convenient way to make code inactive without having to delete it entirely.[1]
Why use Html5 new tags?
    • These tags give a descriptive structure to your HTML, make your HTML easier to read (readability), and help with Search Engine Optimization (SEO) and accessibility.
Why use Dead links?
    • Sometimes you want to add a elements to your website before you know where they will link.[1]
    • This is also handy when you're changing the behavior of a link using JavaScript.[1]
Why do we separate HTML and CSS?
    • apply one style (from one style sheet) to multiple html docs.
    • This improves the readability and reusability of your code.[1]
Why do we need a seprate head and body tags?
    • it adds another level of organization in the HTML document within the html (opening and closing) tags.[1]
How to use the head tag?
    • Any markup with information about the html page would go into the head tag.[1]
    • Metadata elements, such as link, meta, title, and style, typically go inside the head element.[1]

      • Note: if you tried to use non-meta tag inside of the head tag, the browser gonna move that tag to the body tag.[1]

How to use the body tag?
    • Any markup with the content of the page (what displays for a user) would go into the body tag.[1]
      • <!DOCTYPE html>
<html>
  <head>
    <!-- metadata elements -->
  </head>
  <body>
    <!-- page contents -->
  </body>
</html>
What are classes and IDs (and how are they different)?
    • Classes: are reusable styles that can be added to HTML elements.[1]
    • Classes: are attributes of elements that allows grouping of bunch of elements so that it becomes easier to style or manipulate them [i.e: multiple elements can have the same class].
    • IDs: are attributes of elements that allows distinguishing a specific element [i.e: multiple elements shouldn't have the same id, because ids should be unique].[0] An id is an attribute that uniquely describes an element.[1]

    • There are several benefits to using id attributes: You can use an id to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.[1]

    • One cool thing about id attributes is that, like classes, you can style them using CSS. However, an id is not reusable and should only be applied to one element. An id also has a higher specificity (importance: id > class > element) than a class so if both are applied to the same element and have conflicting styles, the styles of the id will be applied.

    Note: id attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same id attribute.[1]

What are elements?
    • Elements are the building block of any html document.
    • Elements usually have opening and closing tags that surround and give meaning to content (used to markup content of the page).
    • Example: there are different tag options to place around text to show whether it is a heading, a paragraph, or a list.[1]
What are tags?
    • tags is a way of marking up content of an html document.
    • using an opening tag and a closing tag to tell the browser that some text of the document is a heading or a paragraph.
    • Example: 
      <openingTag>content</closingtag>
What are attributes?
    • Attributes are like properties of an html element
    • Attributes can be used to alter the content of an html element by applying styles and other properties to the content.
    • Example: 
      <openingTag attribute="value">content</closingtag>
What are forms?
    • Forms are html elements that can contain some textboxes, submit buttons, checkboxes and other stuff.
    • Forms are used for sign up and log in pages.
What is a div?
    • Div: is a block level element that can contain a bunch of other html elements.
    • Divs are mainly used to group multiple html elements together
    • The div element, also known as a division element, is a general purpose container for other elements.[1]
    • The div element is probably the most commonly used HTML element of all.[1]
    • Just like any other non-self-closing element, you can open a div element with <div> and close it on another line with </div>.[1]
Why only elements with name attribute are submitted?
Why do we need hidden input elements?
    • they are really great when you are trying to do some fancy manipulation with javascript or you wanna send something down from a server.[3]

      • Note: when creating a generic form in html, the hidden input is never going to be useful unless you are doing something fancy in javascript or on a server[3].