Scribd
Upload
2 views

SOW - Session #2 - HTML && CSS

This document outlines a session on HTML and CSS, covering fundamental concepts such as HTML structure, tags, attributes, and CSS for styling web pages. It provides step-by-step instructions for creating a basic HTML file and adding various elements like headings, lists, and text formatting. The session also introduces CSS syntax for styling elements and emphasizes hands-on learning through practical exercises.

Uploaded by

ferdaousse2004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

SOW - Session #2 - HTML && CSS

This document outlines a session on HTML and CSS, covering fundamental concepts such as HTML structure, tags, attributes, and CSS for styling web pages. It provides step-by-step instructions for creating a basic HTML file and adding various elements like headings, lists, and text formatting. The session also introduces CSS syntax for styling elements and emphasizes hands-on learning through practical exercises.

Uploaded by

ferdaousse2004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

SOW

Session #2
HTML && CSS

04/11/2023
Merhba
Outline
I. HTML
II. CSS
III. Build to Learn
01. HTML
HTML

- HTML stands for HyperText Markup Language

- It the basic building block for Web Pages

- Tag-Based Language </>


HTML
- https://www.google.com/

- Right Click -> View Page Code


HTML
Thanks
Setup

No Vscode, use online editor

https://urlis.net/sow
HTML

1. Open Visual Studio Code ( Or your favorite Text Editor )

2. Click File -> Open Folder

3. Pick anywhere in your machine -> Right click -> New Folder -> Name it “Li3jbkom”

4. Select the new Folder and Click Open

5. Create New File, name index.html

6. Type in, Hello World!

7. Open the new File using Chrome


HTML
HTML Tags
<html> <h1> <meta>
<p>
<footer>
<strong> <body> <main>
<script> <section>
<table>
<style>
HTML

1. Wrap the text in a <p> tag

2. Refresh the page in Chrome

3. What Changed ?
HTML Document Structure

1. Update your file to look like this

2. Refresh the page in Chrome

3. What Changed ?
HTML Document Structure
HTML
HTML Attributes
HTML Attributes

- Used to provide additional Information about the content of an element

- Made up of two parts “name” = “value”


HTML Attributes
HTML Heading

- The <h1> to <h6> tags are used to define HTML headings.

- <h1> defines the most important heading. <h6> defines the least important heading.

<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>
HTML Headings

1. Add some headings to your code

2. Refresh the page in Chrome

3. What Changed ?
HTML Text Format

- By enclosing words in the tags <b> and </b> we can make characters appear bold.

- By enclosing words in the tags <i> and </i> we can make characters appear italic.

- By enclosing words in the tags <sup> and </sup> we can make characters appear on top.

- By enclosing words in the tags <sub> and </sub> we can make characters appear as index.

Bold Italic
HTML Text Format

1. Add <b>, <i>, <sub> and <sup> tags

2. Refresh the page in Chrome

3. What Changed ?
HTML Text Format

1. Try Also <br/> <hr/>


HTML Lists
HTML Lists

1. Add Unordered and Ordered List to your Code

2. Refresh the page in Chrome

3. What Changed ?
HTML Tables
HTML Forms
02. CSS
CSS

- CSS stands for Cascading Style Sheets

- Used for styling and UI customization

- CSS allows you to create rules that specify how the content of an element should appear.
CSS Syntax

Link
CSS Syntax
<style>

p{

Font-size : 10px

</style>
Thanks
NEXT
JS

Javascript

Javascript.js

You might also like