Skip to main content

What is HTML & CSS

Image
By Prathima

 HTML

HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two fundamental technologies used in web development to create and style web pages. They work together to structure and design web content, allowing developers to create visually appealing and functional websites. Let's explore each of them in detail:


HTML (Hypertext Markup Language):

HTML is the backbone of every web page. It is a markup language used to structure the content of a web page, defining elements and their relationships. HTML documents are made up of collections of elements, denoted by tags enclosed in angle brackets (<>). Here is a breakdown of the main features of HTML:

Elements: HTML documents consist of elements, which are the building blocks of a web page. Elements are defined by tags and can be nested inside each other. Common elements include headings (<h1>, <h2>, etc.), paragraphs (<p>), lists (<ul>, <ol>, <li>), links (<a>), images (<img>), forms (<form>, <input>, <button>), and more.


Attributes: Elements can have attributes that provide additional information about them. Attributes are placed inside the opening tag of an element and are used to modify an element's behavior or appearance. For example, the src attribute in an <img> tag specifies the image source.

Document Structure: HTML documents follow a hierarchical structure. The top-level element is usually <html>, which contains two main sections: <head> (for metadata like title and links to style sheets) and <body> (for the visible content of the page).


Semantic HTML: HTML5 introduced semantic elements such as <header>, <nav>, <article>, <section> and <footer>, which provide meaning to the structure and content of a page. Using semantic elements improves accessibility and search engine optimization.


Spacing and Formatting: HTML ignores whitespace and extra line breaks, so proper indentation and formatting are for readability and maintenance purposes.


Comments: HTML can be commented using <!-- comment text --> to provide comments to developers or temporarily disable parts of the code.

Example of a simple HTML document:


html

Copy code

<!DOCTYPE html>

<html>

<head>

    <title>My Web Page</title>

</head>

<body>

    <h1>Welcome to My Web Page</h1>

    <p>This is a paragraph of text.</p>

    <img src="image.jpg" alt="An image">

    <a href="https://www.example.com">Visit Example.com</a>

</body>

</html>


CSS (Cascading Style Sheets):


CSS is used to control the presentation and layout of HTML elements on a web page. It allows you to define how elements should appear, specifying attributes like colors, fonts, sizes, margins, and positioning. Here are the main aspects of CSS:


Selectors: CSS selectors are used to target HTML elements. You can select elements by tag name, class, ID, or other attributes. For example, to style all <p> elements, you would use p { ... }.

Properties: CSS properties define the visual characteristics of selected elements. Common properties include color (text color), font-size (text size), margin (spacing around an element), padding (spacing inside an element), and background-color (background color).


Values: Properties are assigned values that determine how the selected elements should be styled. Values can be specific colors, sizes (e.g., pixels, percentages), or other units.

Selectors and Properties Combining: CSS rules consist of selectors and properties enclosed in curly braces. Multiple rules can be combined in an external CSS file or embedded within HTML using the <style> element.


Cascading: CSS stands for "Cascading Style Sheets" because styles can cascade, meaning that styles applied at different levels (e.g., inline, internal, external) can affect an element's appearance. The cascade follows a specific order of precedence.


Example of CSS applied to HTML:

/* External CSS file (styles.css) */ h1 { color: blue; font-size: 24px; } p { color: #333; margin: 10px; } /* Inline CSS (inside HTML) */ <div style="background-color: #FFC0CB;">This is a pink div.</div>

Labels:

Comments

Post a Comment

If you have any Doubts plz let me know

Popular posts from this blog

Counter and its Function/Automation/Industrial Automation/PLC counter

By Prathima
What is counter A counter may be a digital circuit or device that counts the amount of products and returns predefined values supported clock pulse applications. The output of the counter are often wont to count the amount of pulses. The counter circuit is typically composed of several flip-flops connected within the cascade method. Counter automation and digitally based components are very widely used components.      Micro controller applications require external events or precise internal time delay generation and calculation of pulse frequency as required . These phenomena are often utilized in digital systems and automation. Both of those events are often performed by software techniques, but software loops for counting won't give accurate results, as little more important work isn't done. These problems are often corrected by timers and counters in micro controllers that are used as interrupts. Classification of counters In digital circuits, counters ...
Post a Comment
Read more

Latching and Unlatching Circuit Using Ladder Logic

By Prathima
 What is PLC A Programmable Logic Controller, or PLC, is a Micro controller Based Device  used for industrial automation. These controllers can make  automatic  for a specific process, machinery, Home Automation  or even an entire production line. Latching is used in plc as well as hardware circuit to make the circuit in continuously on condition.   Latching Circuit in PLC Generally Latching is a circuit used to keep the output continuously in on Condition. Latching is only applicable for the push button or switches which has spring act. When you are using hardware circuit you can use relay or contactors, these two components is used to make load in on condition. In Below concepts we can understand the concepts of latching and unlatching circuit by using switches   Case1: When you are using Toggle switch, latching is not required. Check in below circuit. In this case toggle switc...
Post a Comment
Read more

Level Indicator/Working and its uses

By Prathima
Level indicators   Level indicator is used to detect liquid levels. This is mainly used in water treatment plants, Sewage treatment facilities, buildings , housing complexes and so many other appliances. It will sense lower to higher level of water which is connected to control panel to give the information about the level of liquids. Water level indicator is a combination of probe  sensor or float switches. Working of level indicator   The mechanism of level indicator is quite simple. It will sense the level of liquid in storage tank by using sensor probes. When water reaches a certain level it will give signal to your connected device(Probes send information back to the control panel to trigger an alarm or any indicator. When we are using any type of sensor our motor is to control all the equipment automatically, here  also same, when you connecting the level indicator in storage tank, the control panel can be programmed to automatically turn on or off ...
1 comment
Read more