Introduction to HTML

The Development Process:

The development process in web technology involves several stages that ensures the creation of a functional, user friendly and efficient website or web application.

Steps Involve in Development Process:

1. Planning and Requirement Gathering:

• Understand purpose and goals of the website or application.

• Identify target users and their needs.

• Define technical specification, features and functionality.

• Create a project deadline.

2. Design:

• Wireframing: Create basic layout structure to visualize websites user interface.

• UI/UX Design: Focus on look and feel of site and ensure a smooth user experience.

• Tools like Figma is often used for this step.

3. Frontend Development:

• This is where actual user interface is created using HTML, CSS and JavaScript.

• HTML structure the content on the page.

• CSS is used for styling and layout.

• JavaScript is employed to add interactivity or other functionality (animations, form validation).

• Framework like React, Angular or Vue.js can be used to streamline this process.

4. Backend Development:

• Focuses on server-side logic and database interaction.

• Programming languages like PHP, python, Ruby or Node.JS are commonly used

for backend development.

• Set up databases (MySQL, MongoDB) to store data.

• Implement server-side functions and authentication.

5. Testing:

• Conduct usability testing to ensure a smooth user experience.

• Perform cross-browser testing to ensure compatibility with different web browsers.

• Test the website's functionality, forms, links, and navigation.

• Debug and fix any issues or bugs.

6. Deployment:

• Choose a web hosting provider and set up the server environment.

• Upload the website files to the server.

• Configure domain settings and DNS (Domain Name System).

• Test the live website to ensure everything is functioning correctly.

7. Maintenance and Updates:

• Regularly update content, security patches, and software versions.

• Monitor website performance and user feedback.

• Backup data and maintain security measures to protect against cyber threats.

HTML Tags:

HTML: HTML (Hyper Text Markup Language) is the standard markup language for creation and

structuring web pages. It is also called as language of web.

• It defines structure or layout of webpage using elements and tags.

• HTML is responsible for displaying text, images and other content.

• It serves as the foundation for building websites and web applications.

Tag: A tag is like a container for either content or other HTML tags.

Element: It is combination of start tag, content and end tag.

A Basic HTML Page

<!DOCTYPE html> → Specifies this is an html document.

<html> → Root of an HTML page

<head> → Contains page metadata

<title>My website</title> → Contains title

</head>

<body> → The main body of page ( rendered by browser)

<h1>I am heading</h1> → Heading Tag

<p>I am paragraph</p> → Paragraph Tag

</body> → Closing body tag

</html> → Closing html tag

<!DOCTYPE html>: This declaration specifies the document type and version of HTML being used. In this case, it indicates that the document is written in HTML5.

<html>: This tag wraps the entire HTML document and serves as the root element.

<head>: This section contains meta-information about the HTML document, such as the document title, links to external resources like CSS stylesheets or JavaScript files, and meta tags for search engine optimization.

<title>: The title tag sets the title of the HTML document, which appears in the browser's title bar or tab.

<body>: The body tag contains the visible content of the HTML document, including text, images, links, forms, etc.

<h1> to <h6>: These tags define headings of different levels, with <h1> being the highest level and <h6> the lowest. Headings are used to structure the content hierarchically.

<p>: The paragraph tag defines a paragraph of text. It is used to structure and separate blocks of text.

<a>: The anchor tag creates hyperlinks. It is used to link to other web pages, resources, or specific parts of a document. The href attribute specifies the URL of the link destination.

<img>: The image tag embeds an image in the webpage. The src attribute specifies the URL or file path of the image.

<div>: The division tag defines a division or section in an HTML document. It is often used for layout and styling purposes, allowing developers to group and style content together.

<span>: The span tag is similar to the div tag, but it is used for inline styling or grouping of inline elements.

<ul>, <ol>, <li>: These tags are used to create unordered lists (<ul>) and ordered lists (<ol>),

with list items (<li>) nested within them.

Table Tags:

The <table> tag in HTML is used to create tables that display data in structured, tabular format.

Table consists of rows and columns, which are defined using various tags.

<table>: Define the table

<tr>: Define table row

<th>: Define table header (bold and centered by default)

<td>: Defines table cell

<caption>: Defines table title or description

1. colspan (Column span): The colspan attribute merges multiple columns into a single cell.

2. rowspan (Row span): The rowspan attribute merges multiple rows into a single cell.

Example:

<!DOCTYPE html>

<html>

<head>

<title>My Table</title>

</head>

<body>

<table>

<caption>Student Details</caption>

<tr>

</tr>

<tr>

<td>Aditi</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

Output:

HTML Form Structure:

HTML forms use the <form< tag to collect user input through various interactive controls. These controls range from text field, numeric inputs, email, password, checkboxes, radio buttons and submit button.

Attributes:

action: Specifies the URL where form data will be sent upon submission.

method: Defines the HTTP method used to send form data. Typically, either "GET" or

"POST".

Form Controls:

1. Text Input:

<input type="text">: Creates a single-line text input field.

Attributes:

name: Specifies the name of the input field.

id: Provides a unique identifier for the input field.

placeholder: Displays a hint text within the input field.

value: Sets the initial value of the input field.

Email Input:

<input type="email">: Similar to text input but validates input as an email address.

Password Input:

<input type="password">: Creates a password input field where the entered text is masked.

2. Textarea:

<textarea></textarea>: Defines a multi-line text input field.

Attributes:

name, id, placeholder, value: Similar to text input.

rows: Specifies the visible number of rows in the text area.

cols: Specifies the visible number of columns in the text area.

3. Radio Buttons:

<input type="radio">: Creates a radio button for selecting one option from multiple choices.

Attributes:

name: Specifies the name of the radio button group.

value: Specifies the value of the selected option.

checked: Indicates whether the radio button is initially selected.

4. Checkboxes:

<input type="checkbox">: Creates a checkbox for selecting one or more options.

Attributes:

name, id, value, checked: Similar to radio buttons.

5. Select Dropdown:

<select></select>: Creates a dropdown menu for selecting one option from a list.

<option></option>: Defines each option within the dropdown menu.

Attributes:

name, id: Similar to other form elements.

selected: Specifies the initially selected option.

6. Submit Button:

<input type="submit">: Creates a button to submit the form data.

Attributes:

value: Specifies the text displayed on the button.

7. Label:

<label>: This tag defines a label for an input element. It improves accessibility and usability by associating text labels with form controls.

Attributes:

for: Specifies the ID of the associated input element.

8. <fieldset> and <legend>:

These tags group related form elements together and provide a caption for the group.

Example:

<legend>Personal Information</legend>

<label for="email">Email:</label>

<label for="gender">Gender:</label>

<label for="female">Female</label><br><br>

<label for="skills">Skills:</label>

<option value="javascript">JavaScript</option>

</select><br><br>

<label for="comments">Comments:</label><br>

</fieldset>

</form>

Website structure

1. HTML Document Structure:

a. <!DOCTYPE html> Declaration:

Specifies the HTML version being used (e.g., HTML5).

b. <html> Element:

The root element that wraps the entire HTML document.

c. <head> Element:

Contains meta-information about the HTML document.

Includes elements such as <title>, <meta>, <link>, <script>, etc.

d. <title> Element:

Sets the title of the webpage, displayed in the browser's title bar or tab.

e. <body> Element:

Contains the visible content of the webpage.

Consists of various elements such as headings, paragraphs, images, links, etc.

2. Structural Elements:

a. Headings (<h1> to <h6>):

Used for defining hierarchical headings on the webpage.

b. Paragraphs (<p>):

Used for defining paragraphs of text.

c. Divisions (<div>):

Used for grouping and styling sections of content.

Often used in conjunction with CSS for layout purposes.

d. Spans (<span>):

Similar to <div>, but used for inline styling or grouping of inline elements.

3. Navigation:

a. Navigation Bar:

Typically located at the top of the webpage.

Contains links to different sections of the website (e.g., Home, About, Services, Contact).

4. Content Sections:

a. About Section:

Provides information about the website or organization.

May include text, images, and other multimedia elements.

b. Services/Products Section:

Describes the services or products offered by the website or organization.

May include descriptions, images, pricing, etc.

c. Contact Section:

Provides contact information such as address, phone number, email, etc.

May include a contact form for users to submit inquiries.

5. Footer:

a. Footer Section:

Located at the bottom of the webpage.

Contains copyright information, links to privacy policy/terms of service, social media icons, etc.

Search This Blog

anything i like