SlideShare a Scribd company logo
1 of 18
Week 2

         1.   HTML/XHTML
         2.   HTML/XHTML meta tags
         3.   Create a Web site with
              lists, hyperlinks, images, and tables




                                                      1
HTML

  1.   Hyper Text Markup Language
  2.   Markup language for Web page design
  3.   File name extension: .html, .htm
  4.   With tags surrounded by angle brackets <>
  5.   Developed and maintained by World Wide Web
       Consortium (W3C)
  6.   Further extend to xhtml transitional 1.0
  7.   HTML 4.01 is the most recent finished version (1999)
  8.   HTML 5 is the upcoming version

              Adapted from http://www.w3schools.com/html/html_intro.asp


                                                                          2
HTML tags


 •   keywords surrounded by angle brackets like
     <html></html>
 •   come in pairs like <b> and </b>
 •   The first tag in a pair is the start tag, the second
     tag is the end tag
 •   Or opening tags and closing tags

              Adapted from http://www.w3schools.com/html/html_intro.asp




                                                                          3
HTML elements

          Document
            Type

                Start tag
HTML Elements




                End tag



                                4
XHTML

o   EXtensible HyperText Markup Language
o   a combination of HTML and XML (EXtensible
    Markup Language)
o   consists of all the elements in HTML 4.01, combined
    with the strict syntax of XML
o   almost identical to HTML 4.01
o   a stricter and cleaner version of HTML
o   is W3C recommended

                From http://www.w3schools.com/xhtml/xhtml_intro.asp
                                                                      5
HTML/XHTML differences

 o   XHTML elements must be properly nested
     <b><i>example</i></b>
 o   XHTML elements must always be closed
 o   XHTML elements must be in lowercase
 o   XHTML documents must have one root element
 o   An XHTML document consists of three main parts:
        the DOCTYPE declaration
        the <head> section
        the <body> section
                Adapted from http://www.w3schools.com/html/xhtml_intro.asp


                                                                      6
HTML/XHTML <meta> tag

 • provides metadata about the HTML document
 • not to be displayed on the page, but will be machine
   parsable
 • used to specify page description, keywords, author of
   the document, last modified, and other metadata
 • goes inside the head element
 • can be used by browsers, search engines (keywords), or
   other web services
 • supported in all major browsers
                                  http://www.w3schools.com/tags/tag_meta.asp

                                                                          7
Format text

 • properties panel (heading, bold, italics, link)
 • Copy/paste text
 • Paste special (with structure, basic formatting, full
   formatting)
 • Center text
         format > align > center
 • Check spelling:
         Command > check spelling
 • Import Word and Excel Document
         File > import > Word document

                                                           8
Make a list

              Properties Panel > list icon




                                             9
Table
Insert
    • Insert > table
Select
    • a cell or table
    • a row or column
    • an adjacent cell (hold the mouse and drag across)
Modify
    • Click on table > Properties panel > height/width/ row or
        column number/ border/cellpad/cellspace/align/clear height and
        width/background color
Insert a row or column
    • Click on the row or column
    • Modify > table > insert/delete
                                                                   10
Table (2)

Merge/split cells
      • Click on the cell(s)
      • Properties panel ][
Sort table
      • Select table > command > sort table
Import data from Excel
      • File > import > import Tabular data (Excel file has to
          be saved as Text Tab delimited)
Export data to Excel
      • Select table > File > Export > table (delimiter:
          comma line breaks: windows)
                                                             11
Add links

Insert > common > hyperlink
      Text: text appears on the page
      Link: address
      Target: the new page properties (_blank – opens in a new
          window), otherwise, do not choose
      Access key: no
      Title: (optional)
Properties Panel > Link window




                                                                 12
Links, links - 2 types of links
1. Absolute link – full url (for outside your site)
   • Can be found anywhere with domain names
   • Starts with http://
   For example:
   <a href="http://gslis720.commons.gc.cuny.edu">gslis720 class
          blog</a>
2. Relative link (from current page, within your site)
   • test.html (on the same level)
      for example: <a href="page2.html">Go to page 2</a>
   • ../test.html (up one level)
   • gslis751/test.html (down one level)

                                                                  13
Create Email Links


   1. Highlight the word
   2. Click Insert Panel > Email Link
   3. Enter the email address
                           or
   Property Panel > link window > type in
      mailto: email@yahoo.com




                                            14
Images (1)
                   A few things to consider:
1. Image resolution (resize the image before insert)
2. Image formats
   o GIF (Graphics Interchange Format) contains max
     256 shades
   o JPEG (Joint Photographic Experts Group), contains
     millions of colors, but blotchy
   o PNG (Portable Network Graphics). PNG 32 offers
     256 levels of transparency (not shown in IE 6)
   o PSD – generated by Photoshop. Cannot be inserted
     as it is. It has to be saved as the above 3 formats
     before inserted in Dreamweaver
                                                       15
Images - Which format? what???



    •   If logo, choose .gif
    •   If photo, choose .jpeg
    •   If transparency, choose .png (32)




                                            16
Insert an image

 o Insert > image
   Alternate Text: (enter a name for the image)
   Long description: (may refer to another website, but not
   necessary
Note:
• Make sure to move the image to your designated
  folder first, and then insert;
• The image should be in your site’s root directory;
  if not, DW will ask you if you would like to copy
  it to the root directory, say “yes”.

                                                              17
Insert a rollover image


         Insert > Image Objects > Rollover Image

      Modify an image
        Clink on the image > Properties Panel >




                                                   18

More Related Content

What's hot

HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1Juvywen
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to JavascriptSeble Nigussie
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTMLAmit Tyagi
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtmlFkdiMl
 
Css presentation lecture 1
Css presentation lecture 1Css presentation lecture 1
Css presentation lecture 1Mudasir Syed
 
3. tutorial html web desain
3. tutorial html web desain3. tutorial html web desain
3. tutorial html web desainfaizibra
 
Learn CSS From Scratch
Learn CSS From ScratchLearn CSS From Scratch
Learn CSS From Scratchecobold
 
HTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteHTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteMahinda Gamage
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_201605 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_2016Rich Dron
 
Images and Lists in HTML
Images and Lists in HTMLImages and Lists in HTML
Images and Lists in HTMLMarlon Jamera
 
WEB PAGE DESIGN USING HTML
WEB PAGE DESIGN USING HTMLWEB PAGE DESIGN USING HTML
WEB PAGE DESIGN USING HTMLSneha Mukherjee
 
HTML Lists & Llinks
HTML Lists & LlinksHTML Lists & Llinks
HTML Lists & LlinksNisa Soomro
 

What's hot (20)

Xhtml 2010
Xhtml 2010Xhtml 2010
Xhtml 2010
 
Xhtml
XhtmlXhtml
Xhtml
 
HTML5 Topic 1
HTML5 Topic 1HTML5 Topic 1
HTML5 Topic 1
 
Introduction to Javascript
Introduction to JavascriptIntroduction to Javascript
Introduction to Javascript
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
 
What is html xml and xhtml
What is html xml and xhtmlWhat is html xml and xhtml
What is html xml and xhtml
 
Introduction to WEB HTML, CSS
Introduction to WEB HTML, CSSIntroduction to WEB HTML, CSS
Introduction to WEB HTML, CSS
 
Css presentation lecture 1
Css presentation lecture 1Css presentation lecture 1
Css presentation lecture 1
 
3. tutorial html web desain
3. tutorial html web desain3. tutorial html web desain
3. tutorial html web desain
 
Html
HtmlHtml
Html
 
Introduction to CSS3
Introduction to CSS3Introduction to CSS3
Introduction to CSS3
 
Learn CSS From Scratch
Learn CSS From ScratchLearn CSS From Scratch
Learn CSS From Scratch
 
HTML Webinar Class
HTML Webinar ClassHTML Webinar Class
HTML Webinar Class
 
Html vs xhtml
Html vs xhtmlHtml vs xhtml
Html vs xhtml
 
HTML Web design english & sinhala mix note
HTML Web design english & sinhala mix noteHTML Web design english & sinhala mix note
HTML Web design english & sinhala mix note
 
HTML and CSS part 1
HTML and CSS part 1HTML and CSS part 1
HTML and CSS part 1
 
05 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_201605 RD PoSD Tutorial_xhtml_to_html5_2016
05 RD PoSD Tutorial_xhtml_to_html5_2016
 
Images and Lists in HTML
Images and Lists in HTMLImages and Lists in HTML
Images and Lists in HTML
 
WEB PAGE DESIGN USING HTML
WEB PAGE DESIGN USING HTMLWEB PAGE DESIGN USING HTML
WEB PAGE DESIGN USING HTML
 
HTML Lists & Llinks
HTML Lists & LlinksHTML Lists & Llinks
HTML Lists & Llinks
 

Viewers also liked

Social media as a widget
Social media as a widgetSocial media as a widget
Social media as a widgetRowena LI
 
Week5 ap forms
Week5 ap formsWeek5 ap forms
Week5 ap formsRowena LI
 
Week7 Dreamweaver Behavior & Image Hotspots
Week7 Dreamweaver Behavior & Image HotspotsWeek7 Dreamweaver Behavior & Image Hotspots
Week7 Dreamweaver Behavior & Image HotspotsRowena LI
 
Hybrid in 5 minutes
Hybrid in 5 minutesHybrid in 5 minutes
Hybrid in 5 minutesRowena LI
 
Week1 Introduction
Week1 IntroductionWeek1 Introduction
Week1 IntroductionRowena LI
 
Web 2.0: its impact on library services
Web 2.0: its impact on library servicesWeb 2.0: its impact on library services
Web 2.0: its impact on library servicesRowena LI
 
Week1 Dreamweaver and Server
Week1 Dreamweaver and ServerWeek1 Dreamweaver and Server
Week1 Dreamweaver and ServerRowena LI
 
Social and Mobile Media in the Librarian Profession
Social and Mobile Media in the Librarian ProfessionSocial and Mobile Media in the Librarian Profession
Social and Mobile Media in the Librarian ProfessionRowena LI
 
Dreamforce 13: Engage with Intelligence to Retain for Life
Dreamforce 13: Engage with Intelligence to Retain for LifeDreamforce 13: Engage with Intelligence to Retain for Life
Dreamforce 13: Engage with Intelligence to Retain for LifeServiceSource
 
Meet your 2014 Growth Engine: Subscription Revenues
Meet your 2014 Growth Engine:  Subscription RevenuesMeet your 2014 Growth Engine:  Subscription Revenues
Meet your 2014 Growth Engine: Subscription RevenuesServiceSource
 
Renew OnDemand Brochure
Renew OnDemand BrochureRenew OnDemand Brochure
Renew OnDemand BrochureServiceSource
 
Serving the Next-Gen Customer
Serving the Next-Gen CustomerServing the Next-Gen Customer
Serving the Next-Gen CustomerServiceSource
 
Keebee/Keeping Kids Busy presentation april 2009
Keebee/Keeping Kids Busy presentation april 2009Keebee/Keeping Kids Busy presentation april 2009
Keebee/Keeping Kids Busy presentation april 2009Keeping_Kids_Busy
 
Tribe Night Slidshare Presentation
Tribe Night Slidshare PresentationTribe Night Slidshare Presentation
Tribe Night Slidshare PresentationTribe Church
 

Viewers also liked (20)

PHP
PHPPHP
PHP
 
Social media as a widget
Social media as a widgetSocial media as a widget
Social media as a widget
 
Week5 ap forms
Week5 ap formsWeek5 ap forms
Week5 ap forms
 
Week7 Dreamweaver Behavior & Image Hotspots
Week7 Dreamweaver Behavior & Image HotspotsWeek7 Dreamweaver Behavior & Image Hotspots
Week7 Dreamweaver Behavior & Image Hotspots
 
Week3 css
Week3 cssWeek3 css
Week3 css
 
Hybrid in 5 minutes
Hybrid in 5 minutesHybrid in 5 minutes
Hybrid in 5 minutes
 
Week1 Introduction
Week1 IntroductionWeek1 Introduction
Week1 Introduction
 
Web 2.0: its impact on library services
Web 2.0: its impact on library servicesWeb 2.0: its impact on library services
Web 2.0: its impact on library services
 
Week1 Dreamweaver and Server
Week1 Dreamweaver and ServerWeek1 Dreamweaver and Server
Week1 Dreamweaver and Server
 
Social and Mobile Media in the Librarian Profession
Social and Mobile Media in the Librarian ProfessionSocial and Mobile Media in the Librarian Profession
Social and Mobile Media in the Librarian Profession
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Dreamforce 13: Engage with Intelligence to Retain for Life
Dreamforce 13: Engage with Intelligence to Retain for LifeDreamforce 13: Engage with Intelligence to Retain for Life
Dreamforce 13: Engage with Intelligence to Retain for Life
 
Meet your 2014 Growth Engine: Subscription Revenues
Meet your 2014 Growth Engine:  Subscription RevenuesMeet your 2014 Growth Engine:  Subscription Revenues
Meet your 2014 Growth Engine: Subscription Revenues
 
social work
social worksocial work
social work
 
Renew OnDemand Brochure
Renew OnDemand BrochureRenew OnDemand Brochure
Renew OnDemand Brochure
 
Serving the Next-Gen Customer
Serving the Next-Gen CustomerServing the Next-Gen Customer
Serving the Next-Gen Customer
 
Trabajo de majo
Trabajo de majoTrabajo de majo
Trabajo de majo
 
Keebee/Keeping Kids Busy presentation april 2009
Keebee/Keeping Kids Busy presentation april 2009Keebee/Keeping Kids Busy presentation april 2009
Keebee/Keeping Kids Busy presentation april 2009
 
Tribe Night Slidshare Presentation
Tribe Night Slidshare PresentationTribe Night Slidshare Presentation
Tribe Night Slidshare Presentation
 
Paula
PaulaPaula
Paula
 

Similar to Week 2 HTML lists, hyperlinks, tables, and images

BASIC HTML PROGRAMMING
BASIC HTML PROGRAMMINGBASIC HTML PROGRAMMING
BASIC HTML PROGRAMMINGGautham Rajesh
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to htmleShikshak
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer NotesVskills
 
Web technologies-course 02.pptx
Web technologies-course 02.pptxWeb technologies-course 02.pptx
Web technologies-course 02.pptxStefan Oprea
 
MTA html5 text_graphics_media
MTA html5 text_graphics_mediaMTA html5 text_graphics_media
MTA html5 text_graphics_mediaDhairya Joshi
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.pptssuser568d77
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvZahouAmel1
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptxmalrad1
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basicsAliMUSSA3
 
Web design-1.pptx
Web design-1.pptxWeb design-1.pptx
Web design-1.pptxRabiaAsif31
 
Web forms and html (lect 1)
Web forms and html (lect 1)Web forms and html (lect 1)
Web forms and html (lect 1)Salman Memon
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02Aditya Varma
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1Shawn Calvert
 

Similar to Week 2 HTML lists, hyperlinks, tables, and images (20)

BASIC HTML PROGRAMMING
BASIC HTML PROGRAMMINGBASIC HTML PROGRAMMING
BASIC HTML PROGRAMMING
 
Presentation html
Presentation   htmlPresentation   html
Presentation html
 
HTML 5
HTML 5HTML 5
HTML 5
 
Introduction to html
Introduction to htmlIntroduction to html
Introduction to html
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
 
1. html introduction
1. html introduction1. html introduction
1. html introduction
 
HTML Bootcamp
HTML BootcampHTML Bootcamp
HTML Bootcamp
 
Vskills certified html designer Notes
Vskills certified html designer NotesVskills certified html designer Notes
Vskills certified html designer Notes
 
Web technologies-course 02.pptx
Web technologies-course 02.pptxWeb technologies-course 02.pptx
Web technologies-course 02.pptx
 
MTA html5 text_graphics_media
MTA html5 text_graphics_mediaMTA html5 text_graphics_media
MTA html5 text_graphics_media
 
SDP_-_Module_4.ppt
SDP_-_Module_4.pptSDP_-_Module_4.ppt
SDP_-_Module_4.ppt
 
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvvLecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
Lecture 2 HTML part 1.pptxLecture 10 CSS part 2.pptxvvvvvvvvvvvvvv
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
 
Lecture 2 introduction to html basics
Lecture 2 introduction to html basicsLecture 2 introduction to html basics
Lecture 2 introduction to html basics
 
Web design-1.pptx
Web design-1.pptxWeb design-1.pptx
Web design-1.pptx
 
Web forms and html (lect 1)
Web forms and html (lect 1)Web forms and html (lect 1)
Web forms and html (lect 1)
 
HTML Bootcamp
HTML BootcampHTML Bootcamp
HTML Bootcamp
 
HTML Fundamentals
HTML FundamentalsHTML Fundamentals
HTML Fundamentals
 
3 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp023 1-html-fundamentals-110302100520-phpapp02
3 1-html-fundamentals-110302100520-phpapp02
 
HTML Foundations, part 1
HTML Foundations, part 1HTML Foundations, part 1
HTML Foundations, part 1
 

Recently uploaded

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 

Recently uploaded (20)

UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 

Week 2 HTML lists, hyperlinks, tables, and images

  • 1. Week 2 1. HTML/XHTML 2. HTML/XHTML meta tags 3. Create a Web site with lists, hyperlinks, images, and tables 1
  • 2. HTML 1. Hyper Text Markup Language 2. Markup language for Web page design 3. File name extension: .html, .htm 4. With tags surrounded by angle brackets <> 5. Developed and maintained by World Wide Web Consortium (W3C) 6. Further extend to xhtml transitional 1.0 7. HTML 4.01 is the most recent finished version (1999) 8. HTML 5 is the upcoming version Adapted from http://www.w3schools.com/html/html_intro.asp 2
  • 3. HTML tags • keywords surrounded by angle brackets like <html></html> • come in pairs like <b> and </b> • The first tag in a pair is the start tag, the second tag is the end tag • Or opening tags and closing tags Adapted from http://www.w3schools.com/html/html_intro.asp 3
  • 4. HTML elements Document Type Start tag HTML Elements End tag 4
  • 5. XHTML o EXtensible HyperText Markup Language o a combination of HTML and XML (EXtensible Markup Language) o consists of all the elements in HTML 4.01, combined with the strict syntax of XML o almost identical to HTML 4.01 o a stricter and cleaner version of HTML o is W3C recommended From http://www.w3schools.com/xhtml/xhtml_intro.asp 5
  • 6. HTML/XHTML differences o XHTML elements must be properly nested <b><i>example</i></b> o XHTML elements must always be closed o XHTML elements must be in lowercase o XHTML documents must have one root element o An XHTML document consists of three main parts: the DOCTYPE declaration the <head> section the <body> section Adapted from http://www.w3schools.com/html/xhtml_intro.asp 6
  • 7. HTML/XHTML <meta> tag • provides metadata about the HTML document • not to be displayed on the page, but will be machine parsable • used to specify page description, keywords, author of the document, last modified, and other metadata • goes inside the head element • can be used by browsers, search engines (keywords), or other web services • supported in all major browsers http://www.w3schools.com/tags/tag_meta.asp 7
  • 8. Format text • properties panel (heading, bold, italics, link) • Copy/paste text • Paste special (with structure, basic formatting, full formatting) • Center text format > align > center • Check spelling: Command > check spelling • Import Word and Excel Document File > import > Word document 8
  • 9. Make a list Properties Panel > list icon 9
  • 10. Table Insert • Insert > table Select • a cell or table • a row or column • an adjacent cell (hold the mouse and drag across) Modify • Click on table > Properties panel > height/width/ row or column number/ border/cellpad/cellspace/align/clear height and width/background color Insert a row or column • Click on the row or column • Modify > table > insert/delete 10
  • 11. Table (2) Merge/split cells • Click on the cell(s) • Properties panel ][ Sort table • Select table > command > sort table Import data from Excel • File > import > import Tabular data (Excel file has to be saved as Text Tab delimited) Export data to Excel • Select table > File > Export > table (delimiter: comma line breaks: windows) 11
  • 12. Add links Insert > common > hyperlink Text: text appears on the page Link: address Target: the new page properties (_blank – opens in a new window), otherwise, do not choose Access key: no Title: (optional) Properties Panel > Link window 12
  • 13. Links, links - 2 types of links 1. Absolute link – full url (for outside your site) • Can be found anywhere with domain names • Starts with http:// For example: <a href="http://gslis720.commons.gc.cuny.edu">gslis720 class blog</a> 2. Relative link (from current page, within your site) • test.html (on the same level) for example: <a href="page2.html">Go to page 2</a> • ../test.html (up one level) • gslis751/test.html (down one level) 13
  • 14. Create Email Links 1. Highlight the word 2. Click Insert Panel > Email Link 3. Enter the email address or Property Panel > link window > type in mailto: email@yahoo.com 14
  • 15. Images (1) A few things to consider: 1. Image resolution (resize the image before insert) 2. Image formats o GIF (Graphics Interchange Format) contains max 256 shades o JPEG (Joint Photographic Experts Group), contains millions of colors, but blotchy o PNG (Portable Network Graphics). PNG 32 offers 256 levels of transparency (not shown in IE 6) o PSD – generated by Photoshop. Cannot be inserted as it is. It has to be saved as the above 3 formats before inserted in Dreamweaver 15
  • 16. Images - Which format? what??? • If logo, choose .gif • If photo, choose .jpeg • If transparency, choose .png (32) 16
  • 17. Insert an image o Insert > image Alternate Text: (enter a name for the image) Long description: (may refer to another website, but not necessary Note: • Make sure to move the image to your designated folder first, and then insert; • The image should be in your site’s root directory; if not, DW will ask you if you would like to copy it to the root directory, say “yes”. 17
  • 18. Insert a rollover image Insert > Image Objects > Rollover Image Modify an image Clink on the image > Properties Panel > 18