5 lecture for Website Design & Development, Slides of Web Design and Development

Download 5 lecture for Website Design & Development and more Slides Web Design and Development in PDF only on Docsity!

HTML and CSS Overview

HTML Basic Tags, CSS Introduction

HTML (HYPERTEXT MARKUP

LANGUAGE)

What is HTML?

HTML Example

Hello HTML!

HTML describes formatted text using tags . Visit the SoftUni HTML course to learn more.

HTML Page – Example

• 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 tag
  • Submit the page in the judge: welcome.html in a ZIP file Problem: Welcome to HTML

Developer Tools: [F12] in the Browser

Zen Coding (Emmet) for Fast HTML Coding

ul>li.red*

div#page>div.logo+ul#menu>li *3>a

• Headings: to
• Paragraphs:
  Headings and Paragraphs This is Heading 1 (Biggest) This is Heading 2 (Smaller) This is Heading 3 (More Smaller) This is Heading 4 (Smallest)

First paragraph

Second paragraph

Third paragraph

Comment

• External hyperlink
• Local hyperlink
• Relative hyperlink Hyperlinks Google Exercises … See the exercises presentation Specify the URL

• 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

Problem: Fruits

• Create an O rdered L ist
• Use

  • Each holding Ordered Lists: Tag

    One Two Three

▪ Attribute values for type are 1 , A, a, I, or i

• Create definition lists using
  • Holds terms () with their definitions () Definition Lists: Tag

HTML A markup language … CSS Language used to …

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

HTML TERMINOLOGY

Tags, Attributes and Elements

HTML Tags, Attributes and Elements Google

Books

HTML element Opening tag Closing tag Element body (content) Attribute (CSS class) Element ID Attribute: key = value