HTML and CSS Overview HTML Basic Tags CSS

HTML and CSS Overview HTML Basic Tags, CSS Introduction HTML & CSS Soft. Uni Team Technical Trainers Software University http: //softuni. bg

Table of Contents 1. What is HTML? § HTML Developer Environments 2. HTML Terminology § Tags, Attributes, Elements 3. HTML Basic Tags: Paragraphs, Headings, Hyperlinks, Images, Lists 4. CSS Overview: Selectors and Rules § External, Inline and Embedded CSS 2

Have a Question? sli. do #web-basics 3

HTML (Hyper. Text Markup Language) What is HTML?

What is HTML? § The HTML language describes Web content (Web pages) § Text with formatting, images, lists, hyperlinks, tables, forms, etc. § Uses tags to define elements in the Web page Opening tag <p> <b>Document</b> content goes here… </p> Closing tag Element 5

HTML Page – Example <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>HTML Example</title> </head> <body> <h 1>Hello HTML!</h 1> <p>HTML describes formatted text using < strong>tags </strong>. Visit the <a href="https: //softuni. bg/trainings/ courses">Soft. Uni HTML course to learn more. </a></p> </body> </html> 6

Problem: Welcome to HTML § Create your first HTML page § File name: welcome. html § Title: Welcome § Paragraph of text: I am learning HTML and CSS! § Hints: § Modify the code from the previous slide, use <strong> tag § Submit the page in the judge: welcome. html in a ZIP file Check your solution here: https: //judge. softuni. bg/Contests/391 7

HTML – Developer Environments § Web. Storm § Powerful IDE for HTML, CSS and Java. Script, paid product § Visual Studio § Many languages and technologies, Windows & Mac § Visual Studio Code, Brackets, Net. Beans § Good free tools for HTML 5, cross-platform § Sublime Text, Vim, Notepad++ § For hackers 8

Developer Tools: [F 12] in the Browser 9

Zen Coding (Emmet) for Fast HTML Coding ul>li. red*6 div#page>div. logo+ul#menu>li *3>a <ul> <li <li <li </ul> <div id="page"> <div class="logo"></div> <ul id="menu"> <li><a href=""></a></li> </ul> </div> class="red"></li> class="red"></li> 10

HTML Terminology Tags, Attributes and Elements

HTML Tags, Attributes and Elements Element ID Attribute: key = value <a id="link" href="http: //softuni. bg">Soft. Uni</a> Attribute (CSS class) HTML element Opening tag <div class="item"> <img src="books. png" /> <span>Books</span> </div> Closing tag Element body (content) 12

<div > <section> <h 1> <img> > n a p s < <butto n> <inpu t> > t p i r <sc > l u < <li> <a> <strong> HTML Common Elements Used in 90% of All Internet Sites

Headings and Paragraphs § Headings: <h 1> to <h 6> <h 1>This <h 2>This <h 3>This <h 4>This is is Heading 1 2 3 4 (Biggest)</h 1> (Smaller)</h 2> (More Smaller)</h 3> (Smallest)</h 4> § Paragraphs: <p></p> <p>First paragraph</p> <p>Second paragraph</p>  <p>Third paragraph</p> Comment 14

Hyperlinks § External hyperlink Specify the URL <a href="https: //softuni. bg">Soft. Uni</a> § Local hyperlink <h 1 id="exercises">Exercises</h 1> … See the <a href="#exercises" target="_blank">exercises</a> § Relative hyperlink <a href=". . /2. %20 HTML 5 -Overview. pptx">presentation</a> 15

Images § Images are external files, inserted through the <img> tag <img src="images/Soft. Uni-logo. png" width="400" height="313" /> § Embedded image (Data URI) <img src="data: image/gif; base 64, R 0 l. GODlh. EAAOAL… "/> 16

Problem: Fruits § You are given 4 image files: § apple. png, banana. png, kiwi. png, organge. png § Create a Web page like the screenshot on the right § Hints: use 3 paragraphs, each holding 5 images Check your solution here: https: //judge. softuni. bg/Contests/391 17

Ordered Lists: <ol> Tag § Create an Ordered List § Use <ol></ol> § Each holding <li></li> <ol type="1"> <li>One</li> <li>Two</li> <li>Three</li> </ol> § Attribute values for type are 1, A, a, I, or i 18

Unordered Lists: <ul> Tag § Create an Unordered List using <ul></ul>: <ul type="disc"> <li>First item</li> <li>Second item</li> <li>Third item</li> </ul> § Attribute values for type are: disc, circle, square and none 19

Definition Lists: <dl> Tag § Create definition lists using <dl> § Holds terms (<dt>) with their definitions (<dd>) <dl> <dt>HTML</dt> <dd>A markup language …</dd> <dt>CSS</dt> <dd>Language used to …</dd> </dl> 20

Problem: Wiki Page § Create the following HTML page: (page continues here …) 21

Hints: Wiki Page § File name: wiki-page. html § Title: The Brown Bear § Use <h 1> § Hyperlink: https: //en. wikipedia. org/wiki/Brown_bear § List: use ordered list and unordered list § Text: use paragraph § Image: use the file bear. jpg Check your solution here: https: //judge. softuni. bg/Contests/391 22

Cascading Style Sheets What is CSS?

What is CSS? § CSS defines styling of the HTML elements § Specifies fonts, colors, margins, sizes, positioning, floating, … § CSS rules format: selector { prop 1: val 1; prop 2: val 2; … } § CSS rule example: Selector Closing curly brace Opening curly brace h 1 { font-size: 42 px; color: yellow; } Property Declaration Value 24

Combining HTML and CSS Files (External Style) using-css. html <!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="styles. css"> </head> <body class="modern"><p> This is a <span class="special"> special beer</span> for <span class= "special">special drinkers</span>. </p> </body> </html> styles. css. special { font-style: italic; font-weight: bold; color: blue; }. modern { background: #EEE; } p { font-size: 24 pt; } 25

Problem: To Do List § Create the following page (HTML + CSS files) § Hints: § Container: use <div> § Background color: #f 7 f 381 § Heading: use <h 1> § Date: use <p> + center it § List: use <ol> 26

Solution: To Do List (HTML) to-do-list. html <!DOCTYPE html> <head></head> <body> <div class="my-list"> <h 1>Today's to do list</h 1> <p>TODO: Put day-info here</p> <ol>TODO: Put list-item here</ol> </div> </body> </html> 27

Solution: To Do List (CSS) to-do-list. css. my-list { margin: 0 auto; padding: 8 px 24 px; width: 500 px; font-size: 30 px; border: 1 px solid #f 7 f 381; background: #f 7 f 381; box-shadow: 0 0 10 px 2 px #333333; } to-do-list. css. my-list ol { margin: 12 px; }. my-list p { text-align: center; } Check your solution here: https: //judge. softuni. bg/Contests/391 28

Inline CSS Style § The style attribute in HTML elements Attribute "style" <h 1 style="color: blue">This is a blue … </h 1> Property Value <h 2 style="color: red; font-size: 2. 1 em"> This is a red … Multiple CSS </h 2> declarations 29

Embedded CSS Styles in the HTML Page § Put a <style> element in the HTML <head> section <!DOCTYPE html> <head> <style>. red { color: red; } </style> </head> </html> <body> <p class="red">This is red</p> </body> 30

Inline and Block Elements <div> vs. <span>

Block Elements § <div> and <p> are block elements (rectangles) § Fill the entire container width display: block § Stack vertically one after another <p style="border: 1 px solid red; text-align: center">centered</p> <div style="border: 1 px solid blue">DIV</div> <p style="border: 1 px solid red; text-align: right">right</p> 32

Inline Elements § <span> is inline element § Its shape is not always rectangular display: inline § Can be split across multiple lines <p style="text-align: justify"> Welcome <span style="color: white; background: blue; padding-right: 3 px; padding-left: 3 px; ">to the Software University (Soft. Uni) in Sofia (Bulgaria)</span>, good luck!</p> 33

Inline-Block Elements § Elements can be also inline-block § Rectangles arranged one after another display: inline-block § Just like words in a sentence <div style="text-align: justify; "> <div style="display: inline-block; background: green">green</div> <div style="display: inline-block; background: red">red block</div> … </div> 34