Web_ICP_02 Introduction to HTML and CSS - acikgozmehmet/Web-Mobile_Programming GitHub Wiki

Name: Mehmet Acikgoz

Student Id: 01

Lesson Overview:

  • Introduction to HTML and CSS and discussion on HTML and CSS.
  • Creating HTML pages with css

HTML

Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file which reduces complexity and repetition in the structural content as well as enabling the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.

In Class Programming (ICP): Web_ICP2 - Introduction, HTML and CSS

HTML Task

  1. Create an HTML document named "index.html".
  2. The page should contain
  • paragraphs
  • Headings
  • unordered list
  • ordered list
  • at least two div & span elements
  • at least four block and inline elements
  • images at appropriate locations in the HTML file and should be clickable, i.e., when you click the image, it should redirect you to the location of the image in a new tab
  • any relevant video/YouTube video. The video should have controls like play, pause, etc.

CSS Task-1

  1. Download the Source Code and run the starter code given in the 'Inclass' folder with WebStorm
  2. As shown in Image I, add the notifications icon and your image in the corner of the page and the recently opened tabs below the search bars of Google.

CSS Task-2

  1. As shown in the Image II, create a 'cube-shaped color grid' using HTML
    , elements and CSS elements
    • Each color grid should be 70 × 70
    • The cube should be center-aligned
    • No mandatory of colors (you can choose colors you like)
⚠️ **GitHub.com Fallback** ⚠️