Day - TML/CSS - Project ILUGC(web page)

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 consists of a series of elements
• HTML elements tell the browser how to display the content
• HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

Refer- https://www.w3schools.com/Html/html_intro.asp

CSS:

• Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML.
• CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

Refer- https://developer.mozilla.org/en-US/docs/Web/CSS

Difference between HTML/CSS and Javascript.

-->HTML/CSS - Static pages - Content remains the same every time they are loaded unless manually updated.
-->Javascript - Dynamic pages - Pages can respond to user actions, such as clicking a button, submitting a form, or moving the mouse.

HTML Syntax:

<title>Page Title</title>


   <h1 id="My-First-Heading">My First Heading</h1>
   <p>My first paragraph.</p>

-->Save the file with (.html) extension and double click to run the program.

HTML Element:
In HTML, elements are typically enclosed using an opening tag and a closing tag to define their start and end.
--> Opening Tag : Marks the beginning of an HTML element.
--> Closing Tag : Marks the end of an HTML element with forward slash before the element name.
Ex:

Hello, World!

Standalone tag: A standalone tag (also known as a self-closing tag) in HTML is an element that does not require a closing tag because it does not have any content between an opening and a closing tag.
Ex-
- break:used to insert a line break

Project:

Preparing ILUGC web page layout:(https://ilugc.in/)

    <title>ILUGC</title>
<style>
.container{
    border:1px solid;
    height:200%;
    width:85%;
    margin:auto;
}
.header h4{
    text-transform: uppercase;
    color:#e22d30;
    border-top:1px solid green;
    width: fit-content;
    padding-top:10px;
}
.header{

    margin:25px;
}
</style>


   <div>



<p>Output:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Day - TML/CSS - Project ILUGC(web page)"></p>
<p><strong>Explanation:</strong></p>

<ol>
<li>
: The root element of the HTML document.</li>
<li>
: Contains metadata and resources for the document.</li>
<li>
<title>: Sets the title of the webpage displayed on the browser tab.</title>
</li>
<li>
<style>: Embeds CSS for styling the HTML document.</style>
</li>
</ol>

<ul>
<li><p>.container: Styles the container div:<br>
a) border: 1px solid;: Adds a 1-pixel solid border.<br>
b) height: 200%;: Sets the height to twice the viewport height.<br>
c) width: 85%;: Sets the width to 85% of the viewport width.<br>
d) margin: auto;: Centers the container horizontally.</p></li>
<li>
<p>.header h4: Styles the </p>
<h4> element inside the .header class:<br>
a) text-transform: uppercase;: Converts text to uppercase.<br>
b) color: #e22d30;: Sets the text color to a specific shade of red.<br>
c) border-top: 1px solid green;: Adds a green top border.<br>
d) width: fit-content;: Shrinks the element width to fit its content.<br>
e) padding-top: 10px;: Adds 10 pixels of padding above the text.</h4>
</li>
<li><p>.header: Styles the header div:<br>
a) margin: 25px;: Adds a margin of 25 pixels around the header.</p></li>
</ul>

<ol>
<li>
: Contains all the visible content of the webpage.</li>
<li>
<div>: A container element for grouping and styling content.
<li>
<h1 id="Represents-the-main-heading-of-the-webpage">: Represents the main heading of the webpage.</h1>
</li>
<li>
<h4>: Represents a subheading of lesser importance than <h1 id="">.</h1>
</h4>
</li>


<p><strong>Attribute:</strong><br>
An attribute provides additional information about an HTML element, usually in the form of name-value pairs.<br>
Ex: `</p>
<div>

<p><strong>Padding:</strong><br>
Padding is the space between the content of an element and its border. It creates an internal margin around the content, pushing the content away from the edges of the element.</p>

<p><strong>Margin:</strong><br>
Margin is the space outside an element's border that separates it from other elements. It defines the external space between elements, creating distance around them.</p>

<p><strong>class selector and an element selector:</strong></p>

<ul>
<li>The class selector targets HTML elements that have a specific class attribute, using a period (.) followed by the class name.</li>
<li>The element selector targets HTML elements directly by their tag name</li>
</ul>


          </div>

            
        </div>
</li>
</ol>
</div>

The above is the detailed content of Day - TML/CSS - Project ILUGC(web page). For more information, please follow other related articles on the PHP Chinese website!