Scribd Logo
Upload

Welcome to Scribd!

  • 124 views

    SS1 HTML&CSS PDF

    Uploaded by

    Sandip
    The document provides an overview of HTML and CSS for creating webpages. It describes: 1) The basic structure of an HTML document including common tags like <h1>, <p>, <img>, <a>, and <table>. 2) How to add attributes and styles to HTML elements using inline, internal, and external CSS. 3) The syntax and basic selectors of CSS including element, class, and ID selectors.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    SS1 HTML&CSS PDF

    Uploaded by

    Sandip
    124 views14 pages
    The document provides an overview of HTML and CSS for creating webpages. It describes: 1) The basic structure of an HTML document including common tags like <h1>, <p>, <img>, <a>, and <table>. 2) How to add attributes and styles to HTML elements using inline, internal, and external CSS. 3) The syntax and basic selectors of CSS including element, class, and ID selectors.

    Original Title

    SS1_HTML&CSS.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    The document provides an overview of HTML and CSS for creating webpages. It describes: 1) The basic structure of an HTML document including common tags like <h1>, <p>, <img>, <a>, and <table>. 2) How to add attributes and styles to HTML elements using inline, internal, and external CSS. 3) The syntax and basic selectors of CSS including element, class, and ID selectors.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    124 views14 pages

    SS1 HTML&CSS PDF

    Uploaded by

    Sandip
    The document provides an overview of HTML and CSS for creating webpages. It describes: 1) The basic structure of an HTML document including common tags like <h1>, <p>, <img>, <a>, and <table>. 2) How to add attributes and styles to HTML elements using inline, internal, and external CSS. 3) The syntax and basic selectors of CSS including element, class, and ID selectors.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 14

    Semester 1, 2020

    SELF-STUDY 1 HTML
    The learning activities in this self-study (a.k.a PRIOR to Tutorial) are designed to consolidate and extend your
    understanding of the topics covered in lectures in week 1.

    You should complete all activities and questions until the tutorial in week 2.

    HTML
    HTML stands for Hyper-Text Markup Language which describes the structure and content of web pages using
    markup. HTML elements are represented by tags. These tags enable browser to determine the formatting,
    layout and other specifications of the HTML webpage.

    HTML DOCUMENT STRUCTURE


    Defines the document to be HTML5
    The root element of an HTML page

    Contains the title, metadata or link


    to external JavaScript and CSS

    Contains the visible page content –


    anything within the tags will be
    displayed by the browsers main
    window

    HTML ELEMENTS AND TAGS


    The HTML web page is made up of elements which is usually made up of two tags: start tag and end tag and
    content. Most of HTML elements have two-sided tags. The end tag always ends with a forward slash (/). HTML
    tags are not case sensitive, but lowercase is recommended.

    Contents

    <p> Hello </p>

    Opening tag Closing tag

    BASIC TAGS
    The Table below shows the list of tags which are required for writing the basic HTML codes

    1
    Semester 1, 2020

    Tag Description Example


    h1, …., h6 Heading tag h1 to h6 <h1> Hi </h1>
    p Paragraphs (ling changes at the end) <p> Hi </p>
    span No line change after span <span> Hi </span> Bye
    div Make division between contents <div>….<div>
    a Hyperlink <a href = “ link” ></a>
    center Move content to centre <center> Hi </center>
    br Line break (no closing tag) <br /> or <br>
    hr Horizontal line (no closing tag) <hr /> or <hr>
    pre Preserve formatting <pre>…<pre>
    table Insert table <table><tr><td></td></tr></table>
    img Insert image <img src = “ “>

    HTML HEADINGS
    HTML has six level of headings <h1> to <h6>, each progressively smaller in font size.

    <Example>

    Output

    HTML PARAGRAPHS
    HTML paragraphs are defined with the <p> tag.

    <Example>

    HTML LINKS
    <a> is used to create a clickable link to other web documents or resources. The link’s destination is specified in
    href attribute.

    2
    Semester 1, 2020

    <example>

    HTML IMAGES
    HTML images are defined with the <img> tag. The source attribute (src) contains the name, location and
    extension of the image file.

    HTML ATTRIBUTES
    HTML attributes provide additional information about the content. It comes in the form of name and value pairs
    such as name = “value” (eg. href = “URL”).

    The attributes must be added only to the start tag of the element.

    <Example>

    Below example specifies the path and size of image file. The image size is specified in pixel: width = “104” means
    104 pixels wide.

    The alt attribute specifies an alternative text to be used, when an image cannot be displayed.

    HTML GLOBAL ATTRIBUTES


    HTML global attributes can be used in most of HTML elements. The commonly used global attributes are as
    below:

    Attribute Description
    id A Unique identifier for the element.
    class A name of classification, or the names of classifications, to which the element
    belongs.
    hidden Specifies that the element represents an element that is not yet, or is no longer,
    relevant.
    lang Specifies the primary language for the contents of the element.

    3
    Semester 1, 2020

    style Specifies CSS decorations that apply to the element – in line CSS
    title Determine the title of the element

    For more details:

    https://www.w3.org/TR/2010/WD-html-markup-20101019/global-attributes.html

    HTML METATAGS
    HTML lets you specify metadata which is additional important information about a document in a variety of
    ways. Metadata will not be displayed on the page but will be machine parsable. It usually specifies page
    description, keywords, author of the document, last modified and other meta data that cannot be represented
    by other HTML meta-related elements such as <base>, <link>, <script>, <style> or <title>.

    <meta> tags always place inside the <head> element.

    For more details about metatags : https://www.w3schools.com/tags/tag_meta.asp or


    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta

    HTML TABLES
    An HTML table is defined with the <table> tag.

    Tag Description
    table Beginning and end of table
    tr Row of table
    th Header of cell
    td Data cell

    <Example>

    4
    Semester 1, 2020

    FIGURE 1. TABLE WITH BORDER AND COLOR

    FIGURE 2. TABLE GENERATED

    HTML FORMS
    Form can have different types of controls to collect the input-data from users, which are listed below.

    • Text input
    • Text area
    • Radio button
    • Checkbox
    • Select box
    • File selects
    • Buttons
    • Submit and reset buttons
    • Hidden input

    5
    Semester 1, 2020

    FIGURE 3. CODE FOR FORM.HTML

    6
    Semester 1, 2020

    FIGURE 4. OUTPUT OF FORM.HTML

    If you are new in the HTML, visit https://www.w3schools.com/html/default.asp

    7
    Semester 1, 2020

    CSS
    CSS stands for Cascading Style Sheet. It is a method for applying styles to website. That is, CSS specifies how
    HTML elements look and how they are presented. Therefore, you can write HTML code without being concerned
    with the presentation. You use CSS to specify how it will be presented within any given context.

    THE WAY TO INSERT CSS


    INLINE STYLE
    We saw the attribute ‘style’, which is used for changing the border of the table (See Figure 1). It is the way to
    use style attribute of any HTML element to define style rules.

    Below code is an example of ‘inline CSS’, where the styles are defined inside the individual tags.

    In the above code, we have one ‘heading’ with font-color as ‘blue’ and text-decoration as underline. Suppose
    we want to change the color to red, then we must go to individual ‘h1’ tag and then change the color. This is
    easy in this case, but if we have 100 headings in different ‘html’ files, then this process is not very handy.

    INTERNAL STYLE SHEET:


    It is the way to put your CSS rules into an HTML document using the <style> element. It is placed inside the
    <head> tags.

    Below code is an example of ‘internal CSS’, where the styles are defined inside the <style> tag and placed
    inside the <head> tags.

    8
    Semester 1, 2020

    In the above code, the background color of the web page is white smoke and the all text with <h1> tag in the
    web page will be aligned in the center and have a dark green color.

    EXTERNAL STYLE SHEET


    You define all the style rules within a separate text file and then you can include the file in any HTML
    document using <link> element. In this way, we can manage multiple files easily.

    The CSS code is saved in the file ‘style.css’. Next we need to import the CSS file into the ‘html’ file a shown in
    orange box below.

    style.css

    9
    Semester 1, 2020

    CSS SYNTAX
    - Selector: an HTML tag at which a style will be applied
    - Property: a type of attribute of HTML tag such as color, border, etc
    - Value: assigned to properties. For example, color property can have either red or #F1F1F1 etc.

    Selector
    Declaration

    p { font-size: 20px; color: green; }

    Property Value Property Value

    BASIC CSS SELECTORS


    There are three types of selectors in CSS

    1) Element: can be selected using it’s name. e.g. ‘p’, ‘div’, and ‘h1’ etc
    2) Class: can be selected using ‘.className’ operator. e.g. ‘.myHeading’.
    3) ID: can be selected using ‘#idName’. e.g ‘#myPara’

    FIGURE 5. CODE OF CSS.HTML

    FIGURE 6. CODE OF STYLE.CSS FIGURE 7. OUTPUT OF CSS.HTML

    10
    Semester 1, 2020

    For more about selectors: https://www.w3schools.com/css/css_syntax.asp

    HIERARCHY
    We will understand the hierarchy of the CSS style. If there are two or more conflicting CSS rules that point to the
    same element, the browser follows some rules to determine which one is most specific and therefore wins out.

    Cascading order priority

    1. Inline style (inside an HTML element) – highest priority


    2. External and internal style sheets
    3. Browser default

    CSS Specificity: a rule used by browsers to apply different priorities to different CSS selectors.

    1. ID (Highest priority)
    2. Class
    3. Element

    0/1 0/1 0/1 0/1 0/1

    !important
    style = “”
    id selector

    Class, attribute,
    pseudo class
    selectors
    type selector
    and pseudo
    element

    If two CSS has same priority, then CSS rule at the last will be applicable.

    For more information about CSS: https://www.w3schools.com/css/default.asp

    DESIGN PRINCIPLE
    OVERALL LAYOUT AND VISUAL APPEARANCE
    Overall look is a crucial component of web design. The overall design should align with your business or your
    purposes of building it. It should be simple, familiar, intuitive, clean and accessible to attract your audience
    as soon as the page loads.

    For more information about layout:

    https://tomkenny.design/articles/the-principles-of-good-web-design-part-1-layout/

    COLOUR

    11
    Semester 1, 2020

    Colour is important in usability and delivering the overall mood of the website. Colour design is very
    subjective and may have a negative effect on usability

    For more information about colour:

    https://tomkenny.design/articles/the-principles-of-good-web-design-part-3-colour/

    NAVIGATION
    Navigation simply serves to direct the visitors to the information they desire as quickly as possible.

    For more information about navigation:

    https://tomkenny.design/articles/the-principles-of-good-web-design-part-2-navigation/

    CONTENT
    Paying attention to how your messaging interacts with the design.

    For more information about content

    https://tomkenny.design/articles/the-principles-of-good-web-design-part-4-content/

    MOBILE
    A responsive template that adapts to various screen sizes or mobile should be activated when the users try
    to access your site using non-desktop device such as tablet or phone.

    The best examples of mobile website design: https://blog.hubspot.com/marketing/mobile-website-design-


    examples

    <Bad Example>

    Source: https://webdesignledger.com/worst-websites-ever/

    For more examples, visit:

    12
    Semester 1, 2020

    https://www.mockplus.com/blog/post/bad-web-design

    https://www.interaction-design.org/literature/article/bad-design-vs-good-design-5-examples-we-can-learn-
    frombad-design-vs-good-design-5-examples-we-can-learn-from-130706

    ACTIVITIES
    CREATING YOUR FIRST HTML PAGE
    Create HTML page and put some html content into the page

    1. Put the title of the web page


    2. Put a h1 level heading in the body “Hello World”
    3. Put a small paragraph using p tag with style attribute: <p>
    4. Put list using list tag
    <example>

    STUDY ELEMENTS, ATTRIBUTES, VALUE FOR HTML FORM


    The table below is the list of control inputs and their attribute. Please complete the below table. Some attributes
    and values for input:text are filled as an example. Do some research to find what attributes and values are
    available for each control.

    13
    Semester 1, 2020

    Control Attributes Values Description


    Input: text type Text, password
    Value User-defined Initial value in the area
    Name User-defined Name send to server
    id User-defined Name send to server
    size Number value Width of the text area
    pattern User-defined Specify a regular expression
    Input: radio
    Input: checkbox
    Input: button
    Text area
    Selection box

    Remember keep a copy of your work.

    14

    You might also like