HTML stands for HyperText Markup Language and is the standard markup language for documents designed to be displayed in a web browser. It is often assisted by other programming languages such as Cascading Style Sheets (CSS) and JavaScript.
HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects such as interactive forms may be embedded into the rendered page. HTML provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes, and other items.
- HTML Describes the structure of a Web page
- HTML Consists of a series of elements
- A few HTML Elements label pieces of content like this: This is a heading
<h1>
This is a paragraph<p>
This is a link,<a href="#">
HTML elements are delineated by tags, written using angle brackets. Directly introduce content into the page. Other tags provide information about document text and may include sub-element tags. Browsers do not display the HTML tags but use them to interpret the content of the page.
Exampel of a simple HTML Document:
<!DOCTYPE html>
<html>
<head>
<title>Enter Title Here</title>
</head>
<body>
<h1>First Heading Here></h1>
<h1>First Paragraph Here></p1>
</body>
</html>
- The !DOCTYPE HTML declaration defines that this document is an HTML 5 document
- The html element is the root element of an HTML page
- The head element contains meta information about the HTML page
- The title element specifies a title for the HTML page
- The body element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc
- The h1 element defines a large heading
- The p element defines a paragraph
CSS (Cascading Style Sheets) is used to style and visually enhance the content of HTML documents. CSS rules are applied to HTML elements to define their appearance, layout, and presentation on the web page. These rules consist of selectors, which target specific HTML elements, and declarations, which define the style properties to be applied.
Selectors in CSS identify which elements the styles should be applied to. They can target elements based on their tag names, classes, IDs, attributes, or their relationship with other elements.
The style properties within CSS declarations specify how the selected elements should be styled. These properties include attributes like color, font-size, margin, padding, border, background-color, etc. Each property can have a corresponding value that determines its appearance.
Example of a simple external styles.css Code:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
A “Hello, world!” program is traditionally used to introduce novice programmers to a programming language. “Hello, world!” is also traditionally used in a sanity test to make sure that a computer language is correctly installed, and that the operator understands how to use it.
- Example HTML code that writes out Hello World on a page
<!DOCTYPE html>
<html lang="en"
<head>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
It is important to document all type of code. With a simple <!--Comment here--> in your HTML code adds a comment that are visiable to the programmer but the program doesn't run the code.
Reasons why comments and documentation are important and useful:
- Understanding and Maintenance: Well-documented code helps developers understand the purpose, functionality, and usage of different components within a software system. This facilitates easier maintenance and debugging, especially when multiple developers work on the same codebase or when revisiting the code after a period of time.
- Onboarding New Developers: Documentation serves as a valuable resource for onboarding new developers to a project. It provides them with insights into the project's architecture, design decisions, coding standards, and best practices. This accelerates their learning curve and enables them to become productive more quickly.
- Collaboration and Communication: Documentation fosters collaboration and communication among team members by providing a common reference point for discussing design choices, implementation details, and project requirements. It ensures that everyone is on the same page and reduces misunderstandings or misinterpretations.
- Code Reusability: Well-documented code encourages code reuse by making it easier for developers to identify and understand reusable components or modules. This promotes modularity and scalability within a software system, leading to more efficient development practices.
- Future Enhancements and Evolution: Documentation helps developers anticipate future enhancements or modifications to the codebase by providing insights into its underlying structure and dependencies. This facilitates smoother evolution of the software over time, enabling it to adapt to changing requirements and technological advancements.
- Compliance and Regulation: In certain industries or organizations, documentation may be required to comply with regulatory standards, industry best practices, or internal policies. Properly documented code ensures transparency, accountability, and auditability, which are essential for regulatory compliance.
- Knowledge Transfer: Documentation serves as a knowledge repository for capturing domain-specific knowledge, business rules, and implementation details. It enables knowledge transfer between team members and ensures that critical information is preserved even if key individuals leave the project or organization.