Categories
In this capter we will learn about the HTML basics
-
HTML Tags: HTML uses tags to define elements and structure content. Tags are enclosed in angle brackets (< >). They consist of an opening tag and a closing tag, with the content placed between them. For example,
<p>is the opening tag for a paragraph, and</p>is the closing tag. -
HTML Elements: HTML elements are the building blocks of a web page. They are created using tags and represent different types of content. Examples include headings (
<h1>to<h6>), paragraphs (<p>), lists (<ul>,<ol>,<li>), images (<img>), links (<a>), and more. -
Attributes: Attributes provide additional information about HTML elements. They are placed within the opening tag and consist of a name and a value. Attributes modify the behavior or appearance of an element. For instance, the
hrefattribute in an<a>tag specifies the URL of a link. -
Document Structure: An HTML document typically consists of the following structure:
<!DOCTYPE html>
<html>
<head>
<!-- Meta-information and external resources -->
</head>
<body>
<!-- Content visible on the web page -->
</body>
</html>
In above example
- The
<!DOCTYPE html>declaration defines the document type. - The
<html>element is the root element of the document. - The
<head>element contains meta-information about the document and external resources like CSS and JavaScript files. - The
<body>element contains the visible content of the web page.
-
Headings: Headings are used to define different levels of headings on a page, ranging from
<h1>(the highest level) to<h6>(the lowest level). They help in organizing the structure and hierarchy of content. -
Paragraphs: Paragraphs are defined using the
<p>tag. They are used for grouping and displaying blocks of text. -
Links: Links are created using the
<a>tag. They allow users to navigate to other pages or resources on the web. Thehrefattribute specifies the URL to which the link points. -
Images: Images are inserted using the
<img>tag. Thesrcattribute specifies the source URL of the image file, while thealtattribute provides alternative text that is displayed if the image cannot be loaded. -
Lists: Lists can be unordered (
<ul>) or ordered (<ol>). List items are denoted by the<li>tag. Unordered lists typically display bullet points, while ordered lists display numbers or letters. -
Comments: HTML comments are used to add notes or explanations within the code. They are not displayed on the web page and are written as
<!-- comment text -->.
Example of Heading Tags
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
HTML Paragraph example
<p>
Sample content under HTML paragraph tag
</p>
HTML images
The attributes of this tag are:
- the source file (src),
- the alternative text (alt),
- width,
- height.
<img> tags is used to insert the images in HTML content.
Example of <img> tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>This is an image example</h1>
<img src="/path/to/image/imagename.jpeg" alt="About Image" width="200" height="185"/>
</body>
</html>
Example of the HTML <button> tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Example of the HTML <button> tag:</h1>
<p>You can specify the HTML buttons with the button tag:</p>
<form>
<button type="button">Button</button>
</form>
</body>
</html>
The HTML <button> element is used to create interactive buttons on a web page. Buttons allow users to perform actions, submit forms, or trigger JavaScript functions when clicked. Here are some key points to understand about the <button> element:
Syntax
<button>Button Text</button>
Attributes:
- disabled: When present, the button is disabled and cannot be clicked or interacted with.
- type: Specifies the type of button. Common values are "submit" (used inside a form to submit it) and "button" (default type, used for general purposes).
- name: Provides a name for the button, which can be used when submitting a form.
- value: Specifies the value associated with the button when it is submitted within a form.
Example usage:
<button type="button">Click Me</button>
<button type="submit">Submit</button>
<button disabled>Disabled Button</button>
Styling:
You can style buttons using CSS to customize their appearance. You can set properties like background color, text color, padding, border, and more. Additionally, you can use CSS classes or inline styles to apply specific styles to buttons.
Button Events and JavaScript:
Buttons can be used in conjunction with JavaScript to perform actions or trigger functions when clicked. This can be achieved by adding an event listener to the button and specifying the desired functionality. For example, you can use the onclick attribute or add an event listener using JavaScript.
<button onclick="myFunction()">Click Me</button>
function myFunction() { alert("Button clicked!"); }
In the above example, the onclick event triggers the myFunction() JavaScript function when the button is clicked, and an alert is displayed