Scribd
Upload
25 views

HTML Module

HTML is the standard markup language used to create web pages. It describes the structure of a web page semantically through elements like headings, paragraphs, lists, links, and more. HTML uses tags to define elements in a document and can be extended using additional technologies like CSS and JavaScript.

Uploaded by

Amanuel Kassa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views

HTML Module

HTML is the standard markup language used to create web pages. It describes the structure of a web page semantically through elements like headings, paragraphs, lists, links, and more. HTML uses tags to define elements in a document and can be extended using additional technologies like CSS and JavaScript.

Uploaded by

Amanuel Kassa
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

HTML (Hyper Text Markup Language) 2012

HTML 
What is HTML?
 HTML stands for Hyper Text Markup Language.
 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML elements tell the browser how to display the content
 Hypertext refers to the way in which Web pages (HTML documents) are linked together.
Thus, the link available on a webpage is called Hypertext.
 As its name suggests, HTML is a Markup Language which means you use HTML to simply
"mark-up" a text document with tags that tell a Web browser how to structure it to display.
 HTML is used to build a websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript etc.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Example Explained
 <Html >: This tag informs the browser that it is an HTML document. Text between html
tag describes the web document.
 <Head>: It should be the first element inside the <html> element, which contains the
metadata (information about the document). It must be closed before the body tag opens.
 <Title>: As its name suggested, it is used to add title of that HTML page which appears
at the top of the browser window. It must be placed inside the head tag and should close
immediately. (Optional)
 <Body>: Text between body tag describes the body content of the page that is visible to
the end user. This tag contains the main content of the HTML document.

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012

 The <h1> element defines a large heading


 The <p> element defines a paragraph
Web Browsers(የሰራነውን ድህረ ገፅ ለማየት የምንጠቀምበት)
The purpose of a web browser (Chrome, Edge, Firefox, and Safari) is to read HTML documents
and display them correctly.
Html – Basic Tags
Heading Tags(የፅሁፍ መጠኑን ለመጨመርና ለመቀነስ)
Any document starts with a heading. You can use different sizes for your headings. HTML also
Has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and
<h6>.
Paragraph Tag (በአንቀፅ በአንቀፅ ለመክፈል
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p>
HTML Images Tag(ፎቶዎችን ለማስገብ)
To display images into web document. HTML Images are defined inside the<img> … <img />
tag.
HTML Link Tag(አንድ ቦታ የተሰራውን ከሌላ ቦታ ማገናኘት)
Defines the Link in internal or external document. HTML Link are defined inside the <a>...</a>
tag.
Horizontal rulers ( መስመር ማስመር )
A horizontal ruler <hr> tag acts as a simple separator between page sections.
Centering Content (ከመሀል ለማድረግ)
You can use <center> tag to put any content in the center of the page or any table cell.
Preserve Formatting (ባለት ቦታ አንዲሆን ለማድረግ)
Sometimes, you want your text to follow the exact format of how it is written in the HTML
Document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the
Formatting of the source document.
Non-breaking Space (የጻፍነን ጹሁፍ ሳይለያይ ክፍተት መስጠት)

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
 A common character entity used in HTML is the non-breaking space: &nbsp;
 A non-breaking space is a space that will not break into a new line.
Italic tag (ሰያፍ ጹሁፍ አንዲሆን ለማድረግ )
It is used to write the content in italic format.
Syntax:
<i> Statements... </i>
Bold tag:( ደማቅ ጹሁፍ አንዲሆን ለማድረግ
It is used to specify bold content in html document.
Syntax:
<b> Statements... </b>
Underline tag:( ከስር ማስመር)
It is used to set the content underline.
Syntax:
<u> Statements... </u>
Ordered List tag:(በቅደም ተከተል ለማድረግ)
It is used to list the content in a particular order.
Syntax:
<ol> Statements... </ol>
List tag:(ዝረዝር ነገረችን ለመጻፍ)
It is used to list the content.
Syntax:
<li> Statements... </li>
Unordered List tag: (በቡሌት ለማስቀመጥ)
It is used to list the content without order.
Syntax:
<ul> Statements... </ul>
Scrolling Text tag: (ጽሑፉን ወይም የምስሉን ይዘት ለማንቀሳቀስ ያገለግላል)
It is used to scroll the text or image content.
Syntax:
<marquee> Statements... </marquee>

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
Tables Tags: (ሠንጠረዦችን ለመስርት ያገለግላል)
Table tag is used to create a table in html document.
Table tag:Syntax:
<table> Statements... </table>
Tr tag: (የሠንጠረዦችን ሮው ለመስራት ያገለግላል)
It is used to define row of html table.
Syntax:
<tr> Statements... </tr>
Th tag: ((የሠንጠረዦችን ሴሎችን ለመስራት ያገለግላል)
It defines the header cell in a table. By default it set the content with bold and center property.
Syntax:
<th> Statements ... <th>
Form tag:(የተለያዩ ፎረሞችን ለመስራት)
It is used to create html form for user.
Syntax:
<form> Statements ... <form>
Dropdown option tag:( ወደታች ዝርዝሮች እንዲኖሩት ማድረግ)
It is used to select an option froma drop-down list.
Syntax:
<option> Statements ... <option>
Radio button tag: (ከተሰጡት አማራጮች አንድ አማራጭ ብቻ ለመምረጥ ይጠቅማል)
It is used to select only one option from the given options.
Syntax:
<input type="radio" name="option"> Option 1
HTML Colors
Color Names
In HTML, a color can be specified by using a color name:
Background Color(የበስተጀርባ ቀለም እንዲኖረው ማድረግ)
h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
Text Color(የጽሑፍ ቀለም እንዲኖረው ማድረግ)
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">best of you...</p>
<p style="color:MediumSeaGreen;">html...</p>
HTML Form:(የተለያዩ ፎረሞችን ለመስራት)
What is HTML Form
HTML Forms are required to collect different kinds of user inputs, such as contact details like
name, email address, phone numbers, or details like credit card information, etc.
Forms contain special elements called controls like input box, checkboxes, radio-buttons, submit
buttons, etc. Users generally complete a form by modifying its controls e.g. entering text,
selecting items, etc. and submitting this form to a web server for further processing
HTML Text Field Control (ፎርሙ ቴክስት ብቻ እንዲያስገባ ማድረግ)
The type="text" attribute of input tag creates text field control also known as single line text field
control
Example
<form>
First Name: <input type="text" name="first name"/> <br/>
Last Name: <input type="text" name="last name"/> <br/>
</form>
HTML textarea tag in form (በፎርሙ ውስጥ ስንጽፍ ብዙ ፁፎች እንዲይዝ ማድረግ)
The <textarea> tag in HTML is used to insert multiple-line text in a form. The size of <textarea>
can be specify either using "rows" or "cols" attribute or by CSS.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
Enter your address:<br>
<textarea rows="2" cols="20"></textarea>
</form>
</body>
</html>
HTML Password Field Control(ፎርማችንን ፓስወርድ እንዲቀበል ማድረግ የምናስገባውን ፓስወርድ

እንዳይታይ ያደርጋል)
The password is not visible to the user in password field control.
Example
<form>
<label for="password">Password: </label>
<input type="password" id="password" name="password"/> <br/>
</form>
HTML Email Field Control(ፎርማችን ትክክለኛ ኢሜል እንዲቀበል ማድረግ ስናስገባ @ መኖር አለበት)
The email field in new in HTML 5. It validates the text for correct email address. You must use
@ and . in this field.
Example
<form>
<label for="email">Email: </label>
<input type="email" id="email" name="email"/> <br/>
</form>
Radio Button Control(ከብዙ ምርጫወች ውስጥ አንድ መምረጥ ለምሳሌ፡-ጾታ ወንድ ወይም ሴት )
The radio button is used to select one option from multiple options. It is used for selection of
gender, quiz questions etc.
If you use one name for all the radio buttons, only one radio button can be selected at a time.
Using radio buttons for multiple options, you can only choose a single option at a time.
Example
<form>
<label for="gender">Gender: </label>
<input type="radio" id="gender" name="gender" value="male"/>Male

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
</form>
Checkbox Control
The checkbox control is used to check multiple options from given checkboxes.
Example
<Form>
Hobby:<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label> <br>
<input type="checkbox" id="football" name="football" value="football"/>
<label for="football">Football</label> <br>
<input type="checkbox" id="hockey" name="hockey" value="hockey"/>
<label for="hockey">Hockey</label>
</form>
Submit button control
HTML <input type="submit"> are used to add a submit button on web page. When user clicks
on submit button, then form get submit to the server.
Syntax:
<input type="submit" value="submit">
HTML required attributes(ሪኳየርድ ካልነው ግዴታ ፎርን መሙላት አለብን ማለፍ የለብንም)
HTML required is a Boolean attribute which specifies that user must fill that filed before
submitting the form.
Example:
<form>
<label>Enter your Email-address</label><br>
<input type="text" name="uname" required><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br><br>
<input type="submit" value="login">
</form>

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
HTML placeholder attribute(ፎርማችን ላይ ምን እንደምናስገባ ግልጽ ለማድረግ የሚጠቅመን ነው

መጻፍ ስንጀምር ይጠፋል)


The placeholder attribute specifies a text within an input field which informs the user about the
expected input of that filed.
The placeholder attribute can be used with text, password, email, and URL values.
When the user enters the value, the placeholder will be automatically removed.
Example:
<form>
<label>Enter your name</label><br>
<input type="text" name="uname" placeholder="Your name"><br><br>
<label>Enter your Email address</label><br>
<input type="email" name="email" placeholder="[email protected]"><br><br>
<label>Enter your password</label><br>
<input type="password" name="pass" placeholder="your password"><br><br>
<input type="submit" value="login">
</form>
HTML size attribute(የምናስገባው የጹሁፍ መጠን ምን ያህል ይሁን የሚለውን)
The size attribute controls the size of the input field in typed characters.
Example:
<label>Account holder name</label><br>
<input type="text" name="uname" size="40" required><br><br>
<label>Account number</label><br>
<input type="text" name="an" size="30" required><br><br>
<label>CVV</label><br>
<input type="text" name="cvv" size="1" required><br><br>
HTML Form Example
Following is the example for a simple form of registration.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" id="gender" name="gender" value="male"/>Male <br>
<input type="radio" id="gender" name="gender" value="female"/>Female <br/>
<input type="radio" id="gender" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012

HTML Audio Tag(በፔጃችን ላይ አውዲዎ ማስገባት)


HTML audio tag is used to define sounds such as music and other audio clips. Currently there
are three supported file format for HTML 5 audio tag.
1. mp3
2. wav
3. ogg

<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
Your browser does not support the html audio tag.
</audio>
<audio controls>
<source src="koyal.ogg" type="audio/ogg">
Your browser does not support the html audio tag.
</audio>

<audio controls autoplay loop>


<source src="koyal.mp3" type="audio/mpeg"></audio>

HTML Video Tag(በፔጃችን ላይ ቨዲኦ ማስገባት)

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
HTML 5 supports <video> tag also. The HTML video tag is used for streaming video files such
as a movie clip, song clip on the web page.
Currently, there are three video formats supported for HTML video tag:

 mp4
 webM
 ogg
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>

<video controls>
<source src="movie.ogg" type="video/ogg">
Your browser does not support the html video tag.
</video>

Animut geremew 0948702702


HTML (Hyper Text Markup Language) 2012
REFERENCE
https://www.javatpoint.com/css-tutorial
https://www.w3schools.com/

Animut geremew 0948702702

You might also like