Scribd
Upload
41 views

Tag: It Is A Crucial Tag. It Tells The Browser That The Content Is Located Between and - It Is Also Called The "Root" Element

HTML is used to create web pages and define their structure semantically through elements like headings, paragraphs, lists, links, and more. Key HTML elements include <html> for the root element, <head> for metadata, and <body> for content. Text formatting is done with elements like <b> for bold, <i> for italic. Lists are created with <ul> for unordered and <ol> for ordered lists. Images and videos are added with <img> and <video> tags. Forms are built with inputs like <input>, <select>, and <textarea> and submitted with <button> or <input type="submit">.

Uploaded by

Yesmine Makkes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
41 views

Tag: It Is A Crucial Tag. It Tells The Browser That The Content Is Located Between and - It Is Also Called The "Root" Element

HTML is used to create web pages and define their structure semantically through elements like headings, paragraphs, lists, links, and more. Key HTML elements include <html> for the root element, <head> for metadata, and <body> for content. Text formatting is done with elements like <b> for bold, <i> for italic. Lists are created with <ul> for unordered and <ol> for ordered lists. Images and videos are added with <img> and <video> tags. Forms are built with inputs like <input>, <select>, and <textarea> and submitted with <button> or <input type="submit">.

Uploaded by

Yesmine Makkes
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Hyper Text Markup Langauge It is used to create pages and make them functional.

• Hypertext defines the link between the web pages.


• Markup language is used to define the text document within tag which defines the
structure of web pages.
HTML elements are represented by tags <>
• Paired tag: it has to be closed, it composed from an opening tag and a closing tag with some
content inside of it.
• Unpaired tag: this one does not have to be closed it self closing tag.

< html > tag :

• It is a crucial tag. It tells the browser that the content is


located between < html > and < /html>.

• It is also called the “root” element.


The head element contains information about the web page. You can put many elements inside of it
such as:
<link rel="icon" href="favicon.ico" type="image/x-icon"/>

Title => Sets the title of the page


Link => links elements to html, such as the page icon, CSS files...Etc.

<b>: Bold Text


<i>: Italic Text
<small>: displays smaller text
<del>: defines deleted text

• Unpaired tag: (does not have a companion tag. In other words it doesn’t close)
<br>: breaks a line

HTML attributes provide additional information about a HTML element. Attributes can be
considered as properties of the element. An element may have a single attribute, many attributes, or
no attributes at all.
Attributes are placed in the opening tag, with a space after the element declaration
“alt” attribute is your plan B if your image fails to load.
<img src="path/to/image/dog.jpg" alt="A dog" >

The img tag is called unpaired


we can connect a HTML page to other web pages by creating a hyperlink using the anchor tag.
<a href="https://gomycode.tn/">Take me to GoMyCode's Website</a>
To play an audio html file, use the < audio > element:
The controls attribute is necessary. It adds audio controls, likes play, pause, and volume.
The < source > element allows you to specify alternative audio files which the browser may choose
from.
The browser will use the first recognized format.
The text between < audio >< /audio> will be displayed only if the audio file is not supported by the
browser.
<audio controls>
<source src="test.mp3" type="audio/mpeg">
Please Check the audio Extension
</audio>

It is preferable to include width and height attributes in your tag, and of course to start a video
automatically we use the autoplay attribute:
<video width="320" height="240" autoplay>
<source src="test.mp4" type="video/mp4" />
Please Check the video extension.
</video>

The src attribute in the video tag replace the <source> tag

add videos from youtube and we simply use the iframe tag
<iframe
width="420"
height="315"
src="https://www.youtube.com/embed/zcTFG_F0FRs">
</iframe>

there is many types of list. Let's see the most used :


• Ordered list
• Unordered list
• Description list
To create an unordered list, we use the html tag <ul> typically rendered as a bulleted list but we
can change the style of list using the type attribute. Every element of the list is wrapped with tag
<li>

<ul type="disc">
<ul type="square">
<ol> element represents an ordered list of item,
Ordered list type values can be used to change the numbering
scheme, and include the following:
• 1: Default numeric scheme
• I: Upper-case Roman numerals
• i: Lower-case Roman numerals
• A: Upper-case Alphabet
• a: Lower-case Alphabet
exp
<ol type="I">

The HTML <dl> element represents a description list. The element encloses a list of groups of
terms (specified using the <dt> element) and descriptions (provided by <dd> elements)

• <th > tags are column names


• < tr > tags are rows
• < td > tags are column values of the row
<table border="1">
<tr>
<th>HTML</th>
<th>CSS</th>
<th>JS</th>
</tr>
<tr>
<td>Paragraphs</td>
<td>Selectors</td>
<td>DOM</td>
</tr>
<tr>
<td>Tables</td>
<td>Styles</td>
<td>Elements</td>
</tr>
</table>

semantic tags Typically focusing on using HTML to semantically structure your web content
provides several benefits, including:
• making your web content vastly more accessible to readers with disabilities
• applying styles with CSS will become more consistent and predictable
• earch engines will use the semantic information to better understand your web pages

<header >
It's typically a group of introductory or navigational aids. It may contain some elements such as a
logo, a search form, a slogan, etc.

< main >


It can contain the main section of our website, we will explain it in the next slides.

< footer >


A footer typically contains information about the author, contact information, copyright data, etc.
<nav> Element: it defines a set of navigation links

The <section> element defines a section in a document. if we want to split our home page into
sections for introduction, content, and contact information,
The <article> element defines an article in a document.

It can represent a blog entry, a news/scholarly article, and a forum post


• The <aside> element : it defines some content aside from the content it is placed in (like a
sidebar).
• <figure> and <figcaption> elements : its serves regroup images and caption in one
element.
<form>
<label>Name:</label>
<input type="text" name="first name" placeholder="Type your name here" />
<br />
<label>Number:</label>
<input type="number" name="number" value="23123456" />
<br />

<label>Birth Date:</label>
<input type="date" name="birthday" />
<br />

<label>Password:</label>
<input type="password" name="password" />
<br />

<input type="submit" value="Submit" />


</form>

properties of input include:


• size
• value
• maxlength
• readonly
<select>
<option value="WebTrack">Web Track</option>

<textarea name="message" cols="30" rows="5">


Welcome to GoMyCode
</textarea>

<button> elements are simple to define, and have three different type values:

• submit: submits form data to a server


• reset: resets all the data in the current form
• button: no default behavior. This type of button will be more useful when we begin our
discussion of Javascript

br hr
description list manual list ?

You might also like