Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML, FORMS, Drop down menus, TABLES, Headings, TEXT FORMATTING, LISTS,…
HTML
-
-
-
-
⭐ Some examples of HTML tags are <button>, <img>, <table> and <p>
-
-
-
-
-
FORMS
-
Forms are made of input elements like text fields, checkboxes, and submit buttons. These input elements are nested inside the <form> container tag
The most common form element is <input>. There are many forms of <input> element, depending on the type attribute
-
-
-
-
'It's considered a very good practice to connect the label to the input elements with the use of for and id attributes.
To connect labels and inputs, their id and for attribute values must match up exactly
-
-
-
-
Names and values are needed to correctly store information in the database. The HTML code needs to include where and what to put in the database
For the case of text inputs, you can use the value attribute to define a default value that will be submitted unless a different value is provided by the user.
Drop down menus
Drop-down menus make your forms more efficient, accessible, and organized
-
The <option> container tag is used inside a <select> tag to add choices for the user : <select> <option>
-
-
-
Data will be sent when the form is submitted. You can control the data each option sends with the value attribute
The selected attribute creates a drop-down menu with a pre-selected option. The pre-selected option will be displayed first
-
Labels and drop-down menus are connected with for and id attributes, just like any other form element
-
<label> for attribute, <select> id attribute
When labels and form fields are correctly connected, hitting the labels select the form field
-
TABLES
Tables help you display data in a way that’s easy to scan, compare, and analyze
You can add a table to your web page with the <table> container tag, a table is made of rows and columns
You can add rows to a table with the <tr> (table row) container tag. Rows are nested inside the <table> tag
-
-
The rowspan attribute specifies the number of rows a cell should span. You can use rowspan to merge cells vertically
Borders can be added to tables, rows and cells with the style attribute.
<td> elements within the same row are displayed on the same line, one after the other they are inline elements
Tables usually include headers. A header is a special row at the top of the table used to label each column<th>
-
You can make cells that take up multiple rows and/or columns, using the attributes colspan and rowspan. This is called merging cells.
colspan is for the number of columns a cell should span
Headings
-
-
The image tag <img> is a good example of an empty tag, it doesn’t require a closing tag.
-
You can use up to 6 levels of headings in HTML. The tags for these heading elements are <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
-
-
Heading levels need to be used in the correct order (h1, h2, …h6).
Drag and drop to rearrange the code
-
-
Headings in HTML come in different levels. <h1> defines the most important heading.
Code a level 1 heading
The text on web pages can be organized in different sections, with headings.
Headings also help search engines like Google know what your page is about to show it to the right people.
TEXT FORMATTING
Text formatting helps website visitors find the information they are looking for.
Text formatting is used to highlight the important content on a page and can make your web pages more accessible and inclusive.
HTML formatting tags are used to change how text is displayed.
The bold tag <b> is used to display text in bold.
-
-
-
-
Web pages are designed to be accessible by people with disabilities. Web accessibility is all about making websites more inclusive and removing barriers.
Screen readers are programs that make the content of a web site accessible to users who are blind, visually impaired or have a learning disability.
There are some HTML formatting tags that you can use to make your web pages more accessible.
The strong tag <strong> is used to highlight important text.
Strong text is displayed in bold, just like when you use the <b> tag. The difference is that the <strong> tag also has meaning and is used by screen readers.
The emphasis tag <em> is used to define emphasized text. Emphasized text is displayed in italic, just like when you use the <i> tag. The difference is that the screen reader will verbally stress the words. The <strong> and <em> tags are considered semantic formatting tags because they add meaning to the content. They can serve as an indication of emphasis to a screen reader.
LISTS
In modern web development, lists are very useful elements.
You can even use lists to build navigation menus.
-
-
Ordered lists <ol> show with numbers (1, 2, 3…) instead of bullet points. Use <ol> when the points have a certain order, like step-by-step instructions. Complete the code to create an ordered list
Use unordered lists <ul> when the order of the items is not important. They are shown with bullet points.
-
-
-
-
-
ATTRIBUTES
-
You can have more control over HTML elements with attributes.
Attributes are modifiers that provide additional information about elements.
Attributes can be optional or required. You already know some required attributes.
The image tag requires an attribute to work correctly.
For container tags, the attributes always go in the opening tag. The anchor tag is another example of an HTML element that requires an attribute to work correctly.
-
It's best practice to describe what images are showing. The alt attribute (alternative text) is used to add image descriptions. alt ="Boy in a hat">
-
Attributes usually come in name/value pairs like: name =src, value = "http://"
-
To jump to a specific part of a single-page website, first you need to mark the section with the id (ID) attribute.
Standards
The <body> container tag is used to group everything that gets displayed on a page when loaded in a browser.
Body tags are needed for your page to be compatible with all web browsers.
A web page can contain only one body element.
All the content elements that you need to display (like paragraphs, headings, buttons and images) need to be inside the <body> container tag.
The <body> container tag needs to surround all the elements displayed on the page. When some HTML tags go inside others, this is called nesting.
Websites do more than just display content. The <head> container tag is used to include technical information about the page.
You can use the head to help increase visibility and traffic from search engines like Google. The head needs to be placed before the body.
Title, description and keywords are nested in the head tag.
Today, the majority of web professionals always wrap their HTML code in <html> tags. The <html> tag is a container tag. Head and body are nested inside the <html> tags.
The information in the head is not displayed on the web page. Only the title is shown, in search engine results (e.g. Google) and in the browser tab.
Indentation is considered a very good practice to improve code readability. Indentation is the spaces at the beginning of lines.
LINKS
The Web wouldn’t be possible without HyperText. HyperText is what lets people jump from one web page to another, through links.
HyperText is text that contains a link to another page.
Web pages are called HyperText documents because they are connected by...
-
Hyperlinks are used to link from one web page to others. To create a link, you need "href" to add the destination URL. <a href
="url">Z</a>
The URL needs to be enclosed in quotes to work without errors. If you forget to add href or the quotes, the <a> tag won’t create a hyperlink.
-
-
-
-
STYLE
With the style attribute, you can fully customize the visual presentation of your websites, from typography and colors to layout and more
-
The style attribute can be used to define properties like color, font size and alignment.
The style attribute can make your life a whole lot easier when it comes to formatting. You can customize multiple properties at the same time. Just separate each property:value pair with a semicolon (;).
-
-
-
The border property is a short and simple way to refer to 3 different sub-properties. That’s why it can take 3 values <p style="border:1px solid red">
Some text</p>
.
The only required border subproperty is border-style. If the width is not specified the default value will be “medium”. If color is not specified, the color of the text will be applied to the border.
COMMENTS
Comments help other humans to read your code.
You can add notes or explanations to your code with the comment tag: <!-- … -->
Comments will help others (and future you!) to understand the code.
Comments are ignored by browsers and not displayed on the web page.
-
HTML is a case-insensitive language. This means that the web browser will understand the tags in both upper and lowercase form.
The web browser will ignore white spaces and line breaks in your code. Still, it’s a good practice to organize your code into different lines so it’s easier to read by humans
-
-
-
VIDEOS
-
Just like images, videos are embedded (or linked) into a web page
You can add video files in different formats. Common video formats are: MP4, OGG and WebM
-
-
-
Different media formats are needed for compatibility with different browsers and devices. The <source> tag allows you to add multiple files
You can display play/pause, volume and other video controls with the controls attribute
LAYOUT
<article> represents an independent, self-contained piece of content
-
The <article> tag clearly indicates the role for its content. It’s used for content like news stories, and blog posts.
So <article> is an example of a semantic tag
Layout tags like <header>, <main>, <footer> and <article> are semantic tags because they…give info ab wht they contain
-
-
<aside> is used for secondary, additional or somehow related content
Nesting <aside> within <article> allows you to provide additional, related content specific to that article. It enhances the user experience and makes the content more organized
DIVIDE & CONQUER
Grouping different HTML elements can make your pages faster to load and easier to customize and maintain
-
The <div> element always takes up the full width available. This means the <div> element is a block level element…this means it starts on a new line
Elements grouped in a <div> can be styled quicker, all at once
<div> is a container that groups related content on a web page, such as a sidebar or a navigation menu. <div> doesn’t add meaning to the content because it’s a…non semantic tag
<div> doesn't add any visual effect unless you add a style to it. It’s often used by web developers to group and style HTML elements
-
-
IMAGES
Images are not technically inserted into a web page, they are linked. The source (src) of the image needs to be included in the tag.
-
-
You need to tell the browser where to find the image. The source (src) is the location on the Internet where the image is stored. imgsrc
="http://www.img.jpg"
Web servers are computers that are always connected to the Internet and continuously listening for requests of information.
The URL is a location (or address) on the Web. The image URL needs to be enclosed in either single or double quotes.
The broken image icon is usually shown in web pages when something is wrong with the image.
The code below contains an error. As a result, the image won’t be displayed on the page. "Run" the code to see what the web browser will display
BLOCK ELEMENTS
Every HTML element is either inline or block.
This is one of the most important things for web designers and developers.
The border property’s great for helping us see the difference between these 2 types of HTML element.
-
-
-
-
-
JAVASCRIPT
-
-
A function is a piece of code that can be “called” and reused in a program as many times as you need.
alert() is an example of a function that
The alert() function displays an alert box with a message and an OK button. The message needs to be enclosed in quotation marks.
-
-
HTML code tells the browser (e.g. Chrome, Safari, etc.) how to display a web page.
You’ll start writing, running and testing real HTML code in this lesson to build the structure of a web page.
Closing tags are very similar to the opening tags. The only difference is that they contain a forward slash /.
-
-
Your web browser (e.g. Chrome, Safari, etc.) can read HTML code and translate it into what you see when you surf the web.
-
-
⭐ You can use the Code Playground to write, run and test real HTML code
NAVIGATIONS
-
The <nav> container tag defines a set of links that allows the user to navigate between pages of a website
Links to the different pages are added with the anchor tag <a> and nested inside the <nav> container tag
Links to the different pages are added with the anchor tag <a> and nested inside the <nav> container tag
A single-page website has all its content on the home page. Any navigation links take the visitor down to different sections (instead of loading new pages)
MUSIC & AUDIO
-
Just like video, the <source> tag is used to add source options for audio
Just like video, the src attribute adds the audio file URL. The type attribute adds the format
Just like video, you can add audio files in different formats. Common audio formats are: MP3, OGG and WAV
You can use autoplay, muted and loop attributes to control the behavior of the multimedia element. Just like controls, these attributes have their default values omitted.
TABLES
-
<tr> : Cette balise représente une ligne dans le tableau. Elle est utilisée pour définir chaque ligne de cellules.
<th> : Cette balise est utilisée pour définir les cellules d'en-tête (headers) dans une ligne. Les cellules d'en-tête sont généralement utilisées pour les titres de colonnes ou de lignes.
<td> : Cette balise est utilisée pour définir les cellules de données. Chaque cellule de données se trouve à l'intérieur d'une ligne (<tr>).