Ict lecture on html css, Lecture notes of Computer Science

Download Ict lecture on html css and more Lecture notes Computer Science in PDF only on Docsity!

Introduction to Information and Communication

Technologies

Lecture 11: Web Development (Html & CSS) Instructor: Faima Abbasi Department of Computer Science, Bahria University Islamabad

Front-end https://www.youtube.com/watch?v=9Nr82jC6WoU

HTML =

Hyper Text

Markup Language

Do you imagine how this page would look like without HTML?

Without any markup to give your page content structure, the browser renders unformatted and unstyled text N o HTML?

HTML tags give structure and meaning to your content.

Structural Tags

These tags enclose the entire Web page document.

These tags enclose the Head part of the document

These tags enclose the title of the document. This text appears in the title bar in the browser and on the bookmark list if someone bookmarks your web page.

Sample Structure of a Web Site

John Q. Public's Web Page

This is John Public's Webpage!

Header Tags (cont.) H1 = Giant-sized and bold H2 = Large and bold

H3 = Normal-sized and bold

H4 = Small and bold H5 = Very Small and bold H6 = Tiny and bold

Breaking Lines and Paragraphs

• -

  text

  - Paragraph tag - Most browsers render (process) this with blank lines between each paragraph -
  - Line break tag - Used when the webmaster wants a carriage return but doesn't want a blank line to follow Example: text a

  text a

  text b

  text b
  text c
  text d text c text d

Text Formatting Tags Some basic text formatting styles:

Tag Result

Italics Italics Bold Bold Preformatted Text Preformatted Text Strong Strong Address Address Citations Citations Source Code Source Code

Font modifications Web creators can also change the way text looks by using the tag SIZE="number" - changes size of the font; 1=smallest, 7 = largest Big Small Big Small COLOR="color-name" - changes text color This is red This is red FACE="font-name" - changes font This is the verdana font; this is the chicago font. This is the verdana font; this is chicago font.

Lists -- Unordered Lists Unordered lists:

Item One Item Two Item Three Item Four

• Item One
• Item Two
• Item Three
• Item Four Unordered List Attributes: type="disc/circle/square"
• Disc (default)  Circle ◼ Square

Lists -- Ordered Lists

Item One Item Two Item Three Item Four

1. Item One
2. Item Two
3. Item Three
4. Item Four type="i/I/a/A/1" (default) i = i. Item One I = I. Item One a = a. Item One A = A. Item One 1 = 1.Item One ii. Item Two II. Item Two b. Item Two B. Item Two 2. Item Two iii. Item Three III. Item Three c. Item Three C. Item Three 3. Item Three iv. Item Four IV. Item Four d. Item Four D. Item Four 4. Item Four start="xx"

• This attribute lets you specify which number/letter will start the list Ordered (Numbered) Lists: Ordered List Attributes :