Web Programming: HTML, CSS, and Course Overview

Choose a study mode

Play Quiz
Study Flashcards
Spaced Repetition
Chat to Lesson

Podcast

Play an AI-generated podcast conversation about this lesson

Questions and Answers

How does the use of CSS benefit web developers when managing large websites?

  • CSS decreases website loading times by reducing image sizes.
  • CSS allows for centralized formatting, reducing redundancy and complexity. (correct)
  • CSS automates the process of creating HTML content.
  • CSS dynamically adjusts website content based on user interactions.

Which statement accurately describes the relationship between HTML, CSS, and JavaScript in web development?

  • HTML manages behavior, CSS defines style, and JavaScript structures content.
  • HTML defines style, CSS structures content, and JavaScript manages behaviour.
  • HTML structures content, CSS defines style, and JavaScript manages behaviour. (correct)
  • HTML structures content, CSS manages behavior, and JavaScript defines style.

What is the primary function of the <meta> tag in HTML?

  • To create hyperlinks to other web pages or external websites.
  • To store information about the document, such as character encoding and description. (correct)
  • To define the structure and layout of the main content.
  • To embed executable code, such as JavaScript, directly into the HTML.

How would you correctly link an external CSS stylesheet named styles.css to your HTML document?

<link rel="stylesheet" type="text/css" href="styles.css"> (D) Signup and view all the answers

Considering the principles of well-formed HTML, how should nested tags be properly closed?

<p>Tags should be closed in the reverse order they were opened. (B)</p> Signup and view all the answers

Flashcards

What is HTML?

A language used to structure web pages and their content, using elements to define paragraphs, lists, images, and data tables.

What does '' do in HTML?

These tags should be placed at the top of every HTML page, and specifies the language you will write on the page.

How do tags work in HTML?

Tags are opened and closed with angle brackets, and encapsulate element information like titles or text.

What is CSS?

A language to style an HTML document, describing how HTML elements should be displayed, and controls the style and layout of multiple web pages.

Signup and view all the flashcards

What are the three ways to insert CSS into HTML documents?

Inline, Internal, and External.

Signup and view all the flashcards

Study Notes

  • Lecture 1 is an introduction to Web programming, focusing on HTML and CSS
  • Contact Dr. Alla Jammine at [email protected]

Course Requirements

  • 80% attendance is required for lectures
  • 100% attendance is needed for practice sessions, which are graded based on average results
  • Students must complete CC1 and CC2
  • The course includes 10 lectures and 10 practice sessions
  • The exam is referred to as CC3

Web Programming Languages

  • Hundreds of programming languages exist, but they aren't all equally suited for every situation in web development
  • Popular web development languages:
    • JavaScript
    • HTML
    • CSS
    • React
    • Python
    • C#
    • C++
    • Java
    • PHP
    • Angular
    • Objective C
  • Future demand languages:
    • Java
    • Python
    • JavaScript
    • C++
    • C#
    • PHP
  • Easy to learn languages:
    • HTML
    • Python
    • JavaScript
    • PHP
    • Java

History of the Web

  • Internet appeared in the 1960s
  • The World Wide Web (www) was created in 1991
  • The first web browser, Netscape, arrived in 1994
  • Google founded in 1998
  • Facebook started in 2004
  • Smartphones (iPhone) in 2007
  • Tablets (iPad) in 2010
  • Web browsers include Opera and Firefox

Web Programming Triangle

  • HTML defines the content of web pages
  • CSS specifies the layout of web pages
  • JavaScript programs the behavior of web pages
  • Other programming languages include Javascript, CSS, HTML, ASP.NET, IIS, XML, Web Services, SQL, PHP, Web API, AJAX, and JQuery
  • HTML, CSS, JavaScript are client-side
  • Web servers are server-side

Web Architecture

  • Web browsers include Chrome, Opera, Firefox, and Explore
  • HTML, CSS, and JavaScript run on the client-side
  • A web server operates on the server-side
  • In a client-server relationship, the client (web browser) sends a request to the web server, which responds
  • The server interacts with databases

Web Platform

  • A web browser creates the visual webpage based on HTML code
  • HTML:
    • <!DOCTYPE html>
    • <html>
    • <body>
    • <h1>My First Heading</h1>
    • <p>My first paragraph.</p>
    • </body>
    • </html>
  • HTML, CSS, and JavaScript are client-side technologies
  • ASP.NET, PHP and internet information services (IIS), Apache, Server-side

HTML

  • HTML (HyperText Markup Language) is the language used to write most websites
  • This code structures web pages and their content
  • HTML consists of elements used to enclose different parts of the content
  • Enclosing tags can make words or images hyperlinks, italicize words, or change the font size
  • CSS is used to make the code visually appealing

HTML Tags

  • Most tags must be opened (<tag>) and closed (</tag>)
  • When using multiple tags, closing tags must be in the reverse order of how the tag was opened
  • Correct tag example:
    • <strong>
      • <em>This is really important!</em>
    • </strong>

Basic HTML Page Construction

  • Tags should be placed underneath each other at the top of every HTML
  • <!DOCTYPE html> specifies the language used on the page; HTML 5 in this case
  • <html> signals HTML code
  • <head> contains metadata for search engines and computer programs
  • <body> contains the page content

HTML Editors

  • Web pages can be created and modified using HTML editors:
    • Adobe Dreamweaver
    • CoffeeCup HTML Editor
  • Simple text editors like Notepad or TextEdit are recommended for learning HTML
  • Save the file as "index.htm" with UTF-8 encoding

Creating HTML Web Pages

  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web document
  • The text between <body> and <body> describes the viewable page content
  • The text between<h1> and </h1> describes a heading
  • The text between <p> and </p> describes a paragraph
  • Most everything you click on while surfing the web is a link, taking you to another page
  • Links are included in the <a> tag
  • The <a> or anchor opening tag is written like so: <a href="https://blogging.com/how-to-start-a-blog/">Your Link Text Here </a>
  • The first part of the attribute points to the page that will open once the link is clicked
  • The second part of the attribute contains the text which will be displayed to a visitor in order to entice them to click on that link.

HTML Images

  • The <img> tag displays images
  • The attribute features information for your computer regarding:
    • Source
    • Height
    • Width
    • Alt text
  • Correct Image code example:
    • <!DOCTYPE html>
    • <html>
    • <body>
    • <h1>This is a heading</h1>
    • <img src="myimage.jpg" alt="blabla" width="104" height="142">
    • </body>
    • </html>

Further Tags

  • Tags and attributes are the basis of HTML
  • Tags mark up an HTML element and are enclosed in angle brackets
  • <h1> is an example of a tag
  • Most tags require opening and closing tags in order to function correctly
  • Attributes contain extra information
  • Attributes are placed inside the opening tag
  • "" is an example of an attribute
  • An image's source and alt text are attributes of the "" tag
  • <meta> stores information such as character encoding, name (page context), and description

Useful Tags

  • <a href="http://www.google.com">This is a link to Google</a>: Link to Google
  • <b>This is my Text</b>: Bold text
  • <h1>This is my Header</h1>: Headers
  • <title>This is my Title</title>: Title
  • <img src=“myimage.jpg" alt="blabla" width="104" height="142">: Image
  • <p>My first paragraph.</p>: Paragraph
  • This is my Text <br>
  • This is also my Text: Line break
  • <!-- Write your comments here -->: Comments

Google Fonts

  • Select a font from Google Fonts and copy the link into the HTML file
  • Copy CSS rules for font-family into a CSS file

Multiple Google Fonts

  • To use multiple Google Fonts, copy the links into the HTML file's head section
  • Example of links:
    • <link rel="stylesheet" href="fonts.css">
    • <link rel="preconnect" href="https://fonts.googleapis.com">
    • <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    • <link href="https://fonts.googleapis.com/css?family=Comforter&family=Open+Sans:wght@300&family=Quintesential&display=swap" rel="stylesheet">
  • Paste CSS rules into element selectors to style them according to the choice
  • CSS google fonts example:
    • h3{ font-family: 'Comforter', cursive; }
    • p{ font-family: 'Open Sans', sans-serif; }

CSS

  • CSS (Cascading Style Sheets) styles an HTML document and dictates how HTML elements are displayed
  • CSS controls style and layout across multiple web pages at once

Why CSS

  • HTML was originally for content definition, not formatting
  • Adding formatting tags to HTML led to web development challenges
  • W3C created CSS to address formatting issues
  • HTML 4.0 allowed removing formatting from HTML, storing it in CSS files
  • CSS syntax:
    • Selector {Property: Value;}
    • A CSS declaration always ends with a semicolon and declarations are grouped by curly braces

CSS Classes

  • .center { text-align: center; color: red; }
  • p.center { text-align: center; color: red; }

Three Ways to Insert CSS

  • Inline
    • Using the style attribute inside HTML elements
    • Avoid this to retain advantages of style sheets
  • Internal
    • Using a <style> element in the <head> section
    • Use for single document with unique style
    • To define, use the <style> tag
  • External
    • Using a <link> element to link to an external CSS file
    • Used for multiple page styling
    • CSS is written with any text editor, without any HTML
    • File is saved with extension .css

Example External Style sheet

  • Include a link tag to the stylsheet in head section
    • <head> <link rel="stylesheet" type="text/css" href="mystyle.css">
    • </head>
  • Example style sheet content:
    • body { background-color: lightblue; }
    • h1 { color: navy; margin-left: 20px; }

CSS Properties

  • body {color: blue;}: Text Color
  • h1 {color: #00ff00;}: Text color
  • h2 {color: rgb(255,0,0);}: Text color
  • h1 {text-align: center;}: Text Alignment
  • p.date {text-align: right;}: Text Alignment
  • p.main {text-align: justify;}: Text Alignment
  • body {background-color: lightblue;}: Background Color
  • h1 {font-size: 40px;}: Text Size
  • h2 {font-size: 30px;}: Text Size
  • p {font-size: 14px;}: Text Size
  • p {font-family: "Times New Roman", Times, serif;}: Text Font

CSS Example

Questions

  • The correct answers for the questions are as follows:
    • HTML stands for Hyper Text Markup Language
    • A regular element has 2 tags
    • A closing tag has a / in front
    • <br /> is a Break tag
    • < body > is an opening tag
    • </ body > is a closing tag
    • The meta tag is only found on the home page
    • The correct way to tag an image is: <img src="image.jpg/gif" alt="type some text">
    • An element that does not have a closing tag is called an Empty element
    • An example of an empty element is:< img />
    • Values should be enclosed in Quotation marks
    • All items for the same website need to be saved in the same folder
    • <a href="http://www.google.com" title="Link to Google "target="_blank">Google does add a link to google on the page
    • A homepage is always a welcome page, and explains the purpose or topic of the site
    • View Source brings up a note pad with the HTML code already used for the site

Studying That Suits You

Use AI to generate personalized quizzes and flashcards to suit your learning preferences.

Quiz Team

Related Documents

More Like This

Use Quizgecko on...
Browser
Open
Browser
Browser