Introduction to Web Development HTML, CSS AND JSThe First website at CERN TB [0 reece pan ONTO World Wide Web ‘Te Wise) eweabssats onto el mane ng pier ce gee oes Ent ve cine ut 3 ad ity indy th cma aig acti emo eit Mig a, aly vee SLs, seen Asked Oss Peter ber one fron ise “Rist pj compen odes cart sine (Lie Moke Xi in, NeKTSp. Ss. Tih Masset ies’) ‘Ben of pots ema, onan tee "i ioe ou WS a ne Pes “ats soue pepe ste te poe seme thir re ‘enh code aus FTP.Web browser =Tim Berners-Lee imagined a "Web" of interconnected documents. =He wanted authors to be able to connect an idea in one document to the source of the idea in another, or connect a statement with the data that backs up that statement, so that in reading one document, it is easy to access everything related (linked) to it. =This information was navigated by a new tool called a "Browser".HTML, CSS and JS: The big trio HTML: arnt HyperText Markup Language © Contains all the content (words, headings, figures, diagrams, etc.), organized into a logical structure. Current version: HTMLS =CSS: Cascaded Style Sheet » The presentation or style of the page © Current version: CSS 3 wJS: » JavaScript The actions a page can take such as interaction with the user, and customizing and changing the page according to any number of parameters.> Check your knowledge "True or False: © The primary purpose of HTML is to format the text. * False —HTMLis primarily designed to help organize the structure of a document. CSS is used for formatting and other aspects of design.The Tools Simple Advanced Were Tools * Notepad © Visual Studio ¢ Dream * Notepad++ «Atom Weaver °Vim * Vscode ¢ Microsoft «Nano sublime Expression Web * emacs ¢ Adobe XDae THE CONTENT PARTMarking up =HTML uses angle brackets ("<" and ">") to separate the annotations from the regular text. "In HTML these annotations are called "tags.Demo 1: Hello World =Exercise: © Extract tags and normal text from the document

Hello World

This is my first HTML document

Viewing in a browser — ° febneer-s- 5HTML Element =An HTML document is a set of HTML elements formed in a tree-like structure (Parent -> child) =An element consists of start tag, end tag and the text inside the tag. ,o -® head title html heading body = paragraphDEMO 1: Closer look Start tag ——-

aL Hello World —— content Html element Closing tag --—*

A

This is my first HTML document

Note: Most tags have open and close versions, but there are a few strange ones. We refer to the strange ones as "self closing" tags. (More details later)> Check your knowledge Which is the correct nesting of these elements? 1. “p” inside “body” inside “html” 2. “html” inside “body” inside “p 3. “p” inside “body” inside “head” 1. “p” inside “body” inside “html”Comments =Comments are a way of adding some text that is primarily targeted towards human readers. ="HTML comment tag | Grouping It All together Hello World

This is my first HTML document

More tags =

,

, ...

=

=

,
,
1. ®=

   ---

   or

   ---

   =
   or
   =

   > Check your knowledge
   
    
   
   =A 'ul' element isn't very useful unless it contains what kind of tags?
   
   Answer: 
   Attributes
   
   =Attributes are used in tags to further
   
    
   
   4 
   
   
   ®It is used inside the opening tag it is 
   Camera
   applied to and should be added after a 
   space from the tag name 
    |
   |
   
   =Syntax:
   Attribute name, equal sign, opening
   quotes, attribute value, closing quotesAttributes
   
    
   
   =A tag can have multiple attributes
   
   =The only exception to the name-value pair is if the attribute is a
   ‘boolean attribute’.
   » you add the attribute name to indicate true and omit it to indicate false
   
   
   Lights
   Camera
   Action
   
   Attributes types
   
    
   
   "Global attributes: can be applied to all tags
   ° Example: id, class (explained later with css)
   
   =Non-global attributes: applied only to some specific tags
   ° Example: start, reversed
   
   Check this link to see all HTML attributes and where they can be applied
   © https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes> Check your knowledge
   
   =
   This is me greeting the
   world
   Which of the following is the correct behavior?
   1. Both the classname and paragraph text cannot contain ‘world’
   2. Two different classes 'hello' and 'world' will be applied to the paragraph
   3. The code is invalid because space is not allowed in class attribute's value
   
   4. One class ‘hello world' will be applied to the paragraph
   
   Answer:
   2- Two different classes ‘hello' and ‘world’ will be applied to the paragraphThe ‘title’ attribute
   
    
   
   "It’s a global attribute
   
   =Used to show a message that appears when you point your cursor at
   something
   
   Where is a secret message?The  tag
   
    
   
   | 
   
   =src “source”: tells us where to fetch the image from.
   
   alt “alternate text”: provide a short description of what the image is
   about.
   
   =More attributes: width, heightHyperlinks
   
    
   
   =Hyperlink is any text or image you can click and it will take you to
   another page. This page can be:
   
   Another Web page.
   
   » A bookmark (a specific part of a Web page).
   
   » A local link (link to another part of the same Web page)
   
   © AnemailThe  tag
   
    
   
   | Click to go to Google
   
   =The hyperlink tag in html is simply  (anchor)
   “href: points to the URL that the link should jump to.
   
   “target: specifies the destination where the linked URL in href should
   be opened.
   
   ° _blank: open in a new window
   
   © _self: open in the same window (default)> Check your knowledge
   
    
   
   "Is it valid to have a paragraph element inside the  tag?
   ° Yes
   ° No
   
   =Unlike most attributes, the id of an element should be:
   
   1
   2. the same across a given type of element i.e. all paragraphs have the same id
   ey
   
   4. written in all caps (“ID=")
   
   split by spaces if you want to specify multiple values
   
   unique to that element and can only be used once> Check your knowledge
   
   =What are the required attributes in an image tag? (choose 2)
   1. sre
   2. title
   3. height
   4. alt
   
    
   
   “All browsers support all attributes?
   ° True
   ° False> Check your knowledge
   
   =Which of the following is a valid value following best practice for
   the ‘id’ attribute?
   
   >
   
   
   jaViGaTiOn" > < /p >
   
   core-display" > < /p >
   
   4. < /p >
   
      
   
   =Which of the following statements about global attributes is true?
   1. All global attributes are of type boolean
   2. Global attributes are common to all elements.
   3. Only 'id' and 'class' are global attributes
   4.
   
   . Global attributes only apply to elements that do not have any attributes of
   their own> Check your knowledge
   
   =What do you use to split multiple classnames in the 'class'
   attributes?
   
   1.
   2.
   4.
   4.
   
   You can only specify one classname in the 'class' attribute
   space
   
   comma
   
   Colon
   
   =Which of the following image paths follow the best practice for a
   relative URL?
   
   1.
   2. images/example.png
   3.
   
   4. images\example.png
   
   package\assets\Images\example.PNG
   
   Package/Assets/Images/Example.png> Check your knowledge
   
   =The closing tag for image is .
   ° False
   © True
   
   =What does the ‘alt’ attribute do?
   1. used to distinguish image and text links by a screen reader
   2. describes the information the image conveys or its function
   3. display information about an ambiguous image as a tooltip
   4. links toa URLCascading style sheet
   (ess)
   
   THE SISTER TECHNOLOGY TOHTML THAT
   IS USED TO STYLE YOUR WEB PAGESDefinition
   
    
   
   = Cascading Style Sheets (CSS) form the presentation layer of the
   user interface.
   
   + Structure (XHTML)
   Behavior (Client-Side Scripting)
   + Presentation (CSS)
   
   Tells the browser agent how the element is to be presented to
   the user.Why CSS?
   
   = CSS removes the presentation attributes from the structure
   allowing
   
   + Reusability
   + Ease of maintainability
   + Interchangeable presentation layer
   
   - HTML was never meant to be a presentation language. Proprietary
   vendors have created tags to add presentation to structure. Like
   ,  and .CSS Syntax
   
    
   
   rule __
   
    
   
    
   
   er
   
   Pp
   
    
   
   values
   
    
   
    
   
   color: blue; }
   
    
   
   propertiesUsing Style Sheets
   
    
   
   - External Style Sheet
   _ 
   
   Embedded Styles
   
   
   + Inline Styles