Skip to content

Instantly share code, notes, and snippets.

@dipaish
Last active January 8, 2024 07:46
Show Gist options
  • Save dipaish/82f0a116e4e4ad158e0505e377ca95de to your computer and use it in GitHub Desktop.
Save dipaish/82f0a116e4e4ad158e0505e377ca95de to your computer and use it in GitHub Desktop.
StaticWebSite[object Object]

Exercise 1: Text Formatting and page content

Task 1: Folder Structure

Create a proper folder structure for your website. Save all individual tasks in this folder.

It is important to create a proper folder structure for your website. It facilitates organization, making it simple to locate what you need. A well-designed structure saves time and effort when modifications or additions are needed. It's similar to having a map for your website; everything has a location, which facilitates work and problem-solving.

  • rootfloder
    • index.html
    • exercises
      • exercise1.html
      • exercise2.html
      • exercise3.html
      • exercise4.html
      • exercise5.html
    • styles
      • style.css
    • images
      • image1.png

Task 2: Set up your initial page

Create index.html in the root folder.

index.html is the main file of a website. When you visit a website, your browser looks for index.html first. It's the home page that provides the initial content and structure for the entire site. This file typically includes important information like the site's title, main headings, and often serves as a gateway to other pages. It guides visitors to the core content. A well-structured main page such as the index.html leads to to a user-friendly and well-organized web experience.

  • Content for the index.html page
    • Set the title as My individual Tasks - FirstName LastName .
    • In the body section of your HTML document, include unordered lists as below:
      • Exercise 1
      • Exercise 2
      • Exercise 3
      • Exercise 4
      • Exercise 5
    <!DOCTYPE html>
    <html lang="en">
     <head>
      <title>Your Title</title>
     </head>
     <body>
      Your content. 
     </body>
    </html>
    

head: The HTML head is the contents of the <head>....</head> element. The content of the head element is not displayed to the user. It contains metadata about the document such as the author information, the title of the page, the metadata element such as the document's character encoding, custom icon to your page, link to the CSS and JavaScript file that are applied to the pages, primary language of the document, Your task is to include a proper title, the author information,set the character set as utf-8 and a brief description that is used on a search engine result pages.For this task, please consider reading this document: What's in the head?

body: The HTML <body> element consists of the visible content of a webpage. It is like a container for text, images, links, lists, and other elements that shape the presentation of your website. The content within the <body> tag is what users perceive and engage with, defining the essential components of a webpage.

Task 3: Create exercise1.html

  • Copy the initial segment of the starter code from the index.html file.
  • Update the page title to "HTML Basics - Exercise 1".
  • Choose any website and replicate its content in an HTML page (exercise1.html), focusing on correctly using elements and tags in HTML. Don't be concerned about formatting, backgrounds, or colors.Concentrate on creating elements accurately. Follow the guidelines below:
    • The top level heading of the page can be heading 1 HTML Text Fundamentals
    • Put text pieces from the website in the <p> tag
    • Apply some text formatting such as bold, italic, underline to some part of your text.
    • Add a paragraph that has an image that is aligned to the right side of the page. Images in HTML
    • Validate your html document by using Markup Validation Service
    • Fix errors and warnings if there are any.
  • Update your index.html that is Exercise 1 in index.html should link to this file (exercise1.html) Guide:Creating hyperlinks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment