WP Pro Online

Chapter 27: Selection Menu Controls

Posted on July 13, 2021by Surajit Sahoo

Select Menu

The <select> element generates a drop-down menu from which the user can choose an option.

<select name="">
 <option value="1">One</option>
 <option value="2">Two</option>
 <option value="3">Three</option>
 <option value="4">Four</option>
</select>

Changing the Size

You can change the size of the selection menu with the size attribute. A size of 0 or 1 displays the standard dropdown style menu. A size greater than 1 will convert the drop-down into a box displaying that many lines, with one
option per line and a scrollbar in order to scroll through the available options.

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 26: Progress Element

Posted on July 13, 2021by Surajit Sahoo

Parameter	Value
max	How much work the task requires in total
value	How much of the work has been accomplished already
position	This attribute returns the current position of the <progress> element
labels	This attribute returns a list of *<progress>* element labels (if any)

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 25: Media Elements

Posted on July 13, 2021by Surajit Sahoo

Attribute	Details
width	Sets the element’s width in pixels.
height	Sets the element’s height in pixels.
*<source>*	Defines resources of the audio or video files
track	Defines the text track for media elements
controls	Displays controls
autoplay	Automatically start playing the media
loop	Plays the media in a repeated cycle
muted	Plays the media without sound
poster	Assigns an image to display until a video is loaded

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 24: Void Elements

Posted on July 13, 2021by Surajit Sahoo

Not all HTML tags are of the same structure. While most elements require an opening tag, a closing tag, and
contents, some elements – known as void elements – only require an opening tag as they themselves do not contain
any elements. This topic explains and demonstrates the proper usage of void elements in HTML

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 23: Output Element

Posted on July 12, 2021by Surajit Sahoo

Attribute	Description
Global	Attributes that are available to any HTML5 element. For comprehensive documentation of these attributes see: MDN Global attributes
name	A string representing the name of an output. As a form element, output can be referenced by it’s name using the document.forms property. This attribute is also used for collecting values on a form submit.
for	A space separated list of form element ids (e.g. *<inputs* id=“inp1”> for value is “inp1”) that the output is meant to display calculations for.
form	A string representing the *<form>* that is associated to the output. If the output is actually outside the , *<form>* this attribute will ensure that the output still belongs to the *<form>* and subject to collections and submits of said *<form>*.

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 22: Label Element

Posted on July 12, 2021by Surajit Sahoo

Attributes	Description
for	Reference to the target ID Element. I.e: for=”surname”
form	HTML5, [Obsolete] Reference to the form containing the Target Element. Label elements are expected within a *<form>* Element. If the form=”someFormId” is provided this allows you to place the Label anywhere in the document.

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 21: Navigation Bars

Posted on July 12, 2021by Surajit Sahoo

Basic Navigation Bar

Navigation bars are essentially a list of links, so the ul and li elements are used to encase navigation links.

<ul>
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
</ul>

HTML5 Navigation Bar

To make a navigation bar using the HTML5 nav element, encase the links within the nav tag.

<nav>
 <a href="#">Home</a>
 <a href="#">About</a>
 <a href="#">Contact</a>
</nav>

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 20: Sectioning Elements

Posted on July 10, 2021by Surajit Sahoo

Nav Element

The <nav> element is primarily intended to be used for sections that contain main navigation blocks for the website, this can include links to other parts of the web page (e.g. anchors for a table of contents) or other pages entirely.

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 19: Div Element

Posted on July 10, 2021by Surajit Sahoo

The div element in HTML is a container element that encapsulates other elements and can be used to group and
separate parts of a webpage. A div by itself does not inherently represent anything but is a powerful tool in web
design. This topic covers the purpose and applications of the div element.

CSS HTML HTML 5 Notes For Professional Javascript

Chapter 18: Forms

Posted on July 9, 2021by Surajit Sahoo

Attribute	Description
accept-charset	Specifies the character encodings that are to be used for the form submission.
action	Specifies where to send the form-data when a form is submitted.
autocomplete	Specifies whether a form should have autocomplete on or off.
enctype	Specifies how the form-data should be encoded when submitting it to the server (only for method=”post”).
method	Specifies the HTTP method to use when sending form-data (POST or GET).
name	Specifies the name of a form.
novalidate	Specifies that the form should not be validated when submitted.
target	Specifies where to display the response that is received after submitting the form.

Select Menu

Basic Navigation Bar

HTML5 Navigation Bar

Nav Element

Pin It on Pinterest