HTML & CSS Course - June 25, 2024 PDF
Document Details
Uploaded by Deleted User
2024
Tags
Summary
These are training materials for an HTML and CSS course, held on June 25, 2024. The document outlines the course curriculum, including topics on HTML fundamentals, CSS fundamentals, document structure, multimedia presentation, webpage styling, accessibility, readability, and testing. It also explains the grading system and learning methods. This is not an exam paper; it's training materials, as evidenced by the lack of questions and by identifying the date as June 25, 2024.
Full Transcript
HTML & CSS 25th June 2024 Introduction: The Trainer Course Overview: - What we are going to study. - How we will study. What we are going to study : - HTML & CSS in 6 different domains. Domain 1: HTML Fundamentals. Domain 2: CSS Fundamentals. Domain 3: Docume...
HTML & CSS 25th June 2024 Introduction: The Trainer Course Overview: - What we are going to study. - How we will study. What we are going to study : - HTML & CSS in 6 different domains. Domain 1: HTML Fundamentals. Domain 2: CSS Fundamentals. Domain 3: Document Structure Using HTML. Domain 4: Multimedia Presentation Using HTML. Domain 5: Webpage Styling Using HTML. Domain 6: Accessibility, Readability, and Testing. How are we going to study: - Preassessment before each domain. Goal: to determine prior knowledge of the subject. - Class Lessons: Goal: to explain the objectives & concepts of each topic and pass the knowledge. - Exercise Labs: Goal: to practice the learnt concepts by coding and apply the knowledge. - Work Book: Goal: to get prepared for the exam questions and do the projects for each lesson. - In-Class group project: Goal: to exchange knowledge, brainstorm and do problem solving as team. - Quizzes: Goal: to test the understanding of the learnt concepts. - Assignments: Goal: to reflect on what has been studied individually. - Additional video material: Goal: as a reference to check while at home. - Post-Assessment after each domain: Goal: to determine the knowledge gained from interacting with the Training. Grading System Criteria Percentage Pre-test - Attendance 10% Class Performance 10% Quizzes 5% Assignments 10% Exams 65% Post-Test - Total 100% Today’s Session: Domain 1: HTML fundamentals. Session Outline: Introduction: What is HTML & CSS? Part 1 Part 2 Preparation: Lesson 1: Introduction. Markup with Metadata: Gmetrix. Well-Formed Markup. BlueDomain. Lab Coffee Break Learning material. How to Set up Visual Studio Code. Preassessment. Group Project: Welcome HTML Page Group Project: Build a Welcome HTML page. What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc History of HTML? Why are we studying it? Presentation Layer Application Layer Database/Backend Database: SQL HTML, Javascript , CSS Java Backend Process: Java 3-Tier Architecture Setting up the environment Setting up Visual Studio community: Text Editor or a Tool to write HTML files. Steps: Download and install Visual Studio Community [https://visualstudio.microsoft.com/vs/community/]. Accessing Blue domain: The Training Center System. https://bluedomain.online/ Accessing Gmetrix: For the : Material(Work Book pdf/Video Lessons/ Project Files). Exams: Pre-assessments, Post-assessments and Exams. https://www.gmetrix.net/ [50 min] Pre-assessment First Domain: HTML Fundamentals Lesson Objectives: 1 HTML Fundamentals 1.1 Construct markup that uses metadata elements 1.1.a Script Markup with 1.1.b Noscript Metadata 1.1.c Style 1.1.d Link 1.1.e Meta tags, including encoding, keywords, viewport, description, and translate 1.2 Construct well-formed page markup 1.2.a DOCTYPE declaration 1.2.b Html Well-Formed 1.2.c Head Markup 1.2.d Body 1.2.e Proper syntax 1.2.f Closing tags and commonly used symbols Group Project: Build Welcome Web page. Lesson 1: Markup with Metadata HTML is a Hyper Text Markup Language. It uses tags : command within an HTML document that specifies the formatting of the document or a portion of that document. Most of them have an opening tag and a closing tag. We will learn different tags and how they affect the web page. Exercise: Script Tag: MusicStore1 It is the tag that holds the programming scripts. Head Tag: Contains information that describes the webpage but does not necessarily show on the webpage. Body Tag: Contains information that will show on the webpage. NoScript Tag: Used to inform the user that his/her browser does not support the script language. Link Tag: Allow us to link to external files such as: Style Sheets or script files. These are not hyperlinks to other webpages. Link tags go to the head section as they do not show on the webpage. E.g. : Lesson 1: Markup with Metadata Meta Tag: Can include character types, keywords to help search engines, help different devices on how to render the webpages. E.g. : It is the default setting for HTML5. to use other languages, you need “utf-16” character set. E.g.: To define the keywords for the search engine. E.g.: To provide description about the webpage. E.g.: To help the mobile devices in rendering the webpage. E.g.: To inform the google browser not to translate the page. Exercise: MusicStore1 Lesson 1: Markup with Metadata In Class-Group Project: Welcome Page. Create a website page which has the following: A welcome message with your name. A script tag to check if the browser support Javascript. To display an alert that Javascript is supported. Otherwise, to inform the use that Javascript is not supported. The site should show a paragraph about yourself. What did you study and what are your hobbies. The webpage accepts the default character set. Write a meta data that has some keywords for the search engine. Write a meta data to have some description about your page. The width of the page should render properly on different mobile devices. The page should not be translated by google search engine. HTML & CSS Session#2 Domain 1: HTML Fundamentals 30th June 2024 Today’s Session: Domain 1: HTML fundamentals. Session Outline: Part 1 Part 2 Part 3 Review: Lesson 2: Group Project: Review on previous Well-Formed markup: Café HTML session. Lab Page & prayer Break & prayer Break Pre-assessment for Workbook Questions. Domain 1. Coffee Coffee Group Project: Build a Café HTML page. Lesson 2: Well-Formed Markup HTML documents have four areas: DOCTYPE: Indicate the type of the document. [html refers to HTML5 type]. Other types cloud be HTML 4 or HTML 4.0.1 or XHTML. HTML: Opens and closes the document code. Head: contains titles, links, and meta tags that do not need to show on the webpage. Beside the above, head tag can include script. The title is the name of the webpage and is used by the search engines. Body: Exercise: contains the elements that will be visible on the webpage MusicStore1 DOCTYPE tag Add a new index.html html tag page head tag Add title to the page body tag Lesson 2: Well-Formed Markup In HTML code, most tags have an opening tags and closing tags. Few tags do not need a closing tag. They are called Void elements. Self-contained or containing no data. How to determine whether you need a closing tag? Think if the browser needs the ending tag.
