Scribd
Upload
24 views

Lecture 3_PART 1_ Internet and Web Design (CUU)

Uploaded by

benzogenius38
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

Lecture 3_PART 1_ Internet and Web Design (CUU)

Uploaded by

benzogenius38
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

Internet Technology and Web Design (BIT122/BS)

Lecturer: Nkoloogi Blasius


Email: [email protected]
Tel No: 0757886712

In Lecture 2, we covered the foundational aspects of HTML, including the basic structure of
an HTML document and common HTML elements such as headings, paragraphs, links,
images, and forms. Students learned how to create a simple web page and explored new features
introduced in HTML5, such as semantic tags and multimedia elements.

Recap of Key Concepts from Lecture 2:

1. HTML Document Structure:


○ We introduced the structure of an HTML document, starting with <!DOCTYPE
html>, followed by <html>, <head>, and <body> tags. The <head> contains
meta-information like the title, and the <body> contains the content displayed on
the webpage.
2. Essential HTML Tags:
○ Headings: <h1> to <h6> for varying heading sizes.
○ Paragraphs: <p> to define paragraphs of text.
○ Text Formatting: Tags like <b> (bold), <i> (italic), and <u> (underline).
○ Comments: How to use <!-- --> for adding comments to HTML code.
3. Links and Images:
○ Links: We learned how to create hyperlinks using <a href="">.
○ Images: Embedding images with <img src="image.jpg" alt="description">.
4. Forms:
○ Students practiced creating simple forms using the <form> element, input fields
like text and submit buttons, and attributes like action and method.
5. HTML5 Semantic Elements:
○ We explored the importance of using semantic tags such as <header>, <footer>,
<article>, and <nav> to make HTML more readable and accessible. These tags
help with SEO and improving the overall structure of a webpage.

LECTURE 3: Advanced HTML and CSS (PART 1)


Objectives:

● Understand the Advanced HTML Elements.


● Learn about CSS and Styling Techniques.
● Get familiar with Layouts with Flexbox and Grid.
● Learn Responsive Design with Media Queries.

Materials Needed:

Computer with a text editor (e.g., Notepad++, VS Code) and a web browser.
Basic knowledge of HTML (from Lecture 2).

Complementary Learning Resources:

https://www.w3schools.com

Cloud-based platforms:

Github (https://github.com/) → code management, version control, and collaboration


Netlify (https://www.netlify.com/) → hosting and deploying web applications in the
cloud.

1. Advanced HTML Elements


● HTML Tables:
● Definition and Purpose: Tables allow us to structure data in rows and columns.
● Table Syntax:
Tag for creating a table: <table></table>
Creating rows: use <tr></tr>. We can have many rows
Creating columns: use <th> </th>inside <tr> </tr> tags to create the field
names. Can have multiple columns inside a single <tr> </tr> tag.
Creating data inside the columns/ against the fields: use <td></td> inside
the <tr></tr>. Can have multiple data inside a single <tr> </tr> tag.
The <tr> element defines a table row, the <th> element defines a table
header, and the <td> element defines a table cell.

Attributes:

Cellpadding: Cell padding is the space between the cell edges and the cell
content. By default the padding is set to 0.

Width: sets the table on the webpage.

Border: sets the thickness of the border of the table.

Colspan: The colspan attribute defines the number of columns a cell


should span. Browser Support Syntax <td colspan="number"> E.g.,
<tr><td colspan="4">Total</td><tr>

Rowspan: The rowspan attribute specifies the number of rows a cell


should span. Browser Support Syntax <td rowspan="number".
● Example of a Table:

● HTML forms (Advanced)


● Forms with Radio Buttons
● Forms with Check Boxes
● Additional Input Types
● Using <div> and <span>
● These are non-semantic elements often used for layout purposes.
● Why is it important to learn how to use <div> and <span> tags yet
they are non-semantic elements?
❖ Layout and styling: It is essential for creating layouts, especially when
more complex or custom designs are required that aren't fully supported
by semantic elements like <section>, <article>, or <header>. CSS
frameworks and grid systems often rely on divs. <span> is an inline
element, commonly used to apply styles or scripts to small parts of text
within other elements like paragraphs or headings, where a block-level
element wouldn't be appropriate.
❖ Fallback and Flexibility: Semantic elements are preferred, but they don't
always cover every possible use case. When a specific semantic element
doesn't exist or isn't a perfect fit, you can use a <div> or <span> to apply
custom behaviors or styles.
❖ JavaScript Interactions: Many frameworks and libraries like React,
Angular, or even vanilla JavaScript frequently use <div> and <span> as
wrappers for dynamic content or for targeting elements in the DOM
without being tied to a specific semantic meaning. <div> is ideal for
manipulating groups of elements without implying specific content.
❖ Legacy Code and Backward Compatibility: Many older websites and
applications still use non-semantic HTML extensively. Learning how to
use <div> and <span> prepares web developers to work with legacy code
and ensures they can contribute to maintaining or updating older websites
that don’t fully embrace HTML5 semantic tags.
❖ Complementing Semantic Elements: In practice, <div> and <span>
often complement semantic elements. For example, a <div> can be used to
group several related <article> tags together in a flexible way that still
makes sense structurally.
2. CSS and Styling Techniques

Introduction to CSS (Style Cascading Stylesheets)

CSS is a web technology used to style and create presentable layouts for web pages.
Benefits of CSS
● Separation of concern: CSS separates the web content from presentation hence
allowing a better control of layouts, colors, fonts, and other properties.
● Saves time in web development: Can write CSS code once and use it in multiple
pages.
● Optimization: CSS enables writing less code, hence resulting in faster loading of
pages.
Better user experience: CSS allows making web pages more user friendly.
CSS Versions
CSS1: 1996 Release
CSS2: 1998 Release
CSS2.1: 2011 Release
CSS3: 2000s-2010s Release
CSS4: 2020-to date Ongoing Development.
CSS Syntax

The selector points to the HTML element you want to style.


The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.

In the Example:

<!-- h is the selector, curl bracket is a declaration block, color and text-align are
properties while blue and center are values -->

h{
color: red;

text-align: center;

NEXT → CSS Selectors:

Assignment 2:

With the support of your group members:

1. Open GitHub and Netlify accounts.


2. Create a repository for your personal webpage assignment (from lecture 2) on
GitHub.
3. Host the webpage on Netlify using the repository from GitHub.
4. Read and familiarize yourself with the categories of selectors in CSS. You are not
required to apply them yet.

Assignment Steps:

Step 1: Create GitHub and Netlify Accounts

1. GitHub:
○ If you don’t have a GitHub account, sign up at GitHub.com.
○ After signing up, create a new repository named personal-webpage.
2. Netlify:
○ Sign up at Netlify.com if you don’t already have an account.
○ You’ll use this account to host your webpage after pushing the code to
GitHub.
Step 2: Add Your Personal Webpage to GitHub

1. Push Your Code:


○ Clone your newly created GitHub repository to your local machine.
○ Add the files for your personal webpage (from lecture 2) to the cloned
folder.
○ Use the Git commands to push your webpage files to GitHub:
○ Your webpage files should now be visible in the GitHub repository.

Step 3: Host Your Webpage on Netlify

1. Connect GitHub to Netlify:


○ Log in to Netlify.
○ Select "New site from Git".
○ Choose GitHub as the deployment method.
○ Find and select your personal-webpage repository.
2. Deploy:
○ Netlify will automatically build and deploy your site.
○ Once the deployment is complete, you'll receive a URL to access your
hosted webpage.

Step 4: Study CSS Selectors

1. Read About CSS Selectors:


○ Understand the various categories of CSS selectors, including:
■ Element selectors (e.g., p, h1)
■ Class selectors (e.g., .className)
■ ID selectors (e.g., #idName)
■ Attribute selectors (e.g., input[type="text"])
■ Pseudo-class selectors (e.g., :hover, :nth-child())
2. Practice CSS Selectors:
○ You are encouraged to practice and explore how these selectors work
in your own time, but you do not need to apply them to your current
webpage just yet.
○ We will discuss these selectors in an upcoming lecture, so take notes
and come prepared to share your understanding.

Deliverables:

● Send me the following via email by 19th Sep, 2024:


1. The URL of your hosted webpage on Netlify (ensure it's working).
2. The GitHub repository link to your personal webpage.

Send the links to [email protected]

You might also like