Scribd
Upload
113 views

Fundamentals of HTML & CSS From Scratch.

This document provides an introduction to HTML and CSS. It discusses: 1. HTML defines the content and structure of a web page, CSS describes the style and layout, and web browsers display web pages. 2. Basic HTML elements include headings, paragraphs, tags, and structure tags to define the head and body. 3. CSS controls the look and positioning of HTML elements. It can be added internally or linked externally. CSS rules use selectors, declarations, and properties to style elements. 4. Additional HTML elements cover links, images, and lists. Links use anchor tags and attributes like href. Images also use tags. Lists come in ordered, unordered, and definition styles.

Uploaded by

SDE CSC MAVELIKARA
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
113 views

Fundamentals of HTML & CSS From Scratch.

This document provides an introduction to HTML and CSS. It discusses: 1. HTML defines the content and structure of a web page, CSS describes the style and layout, and web browsers display web pages. 2. Basic HTML elements include headings, paragraphs, tags, and structure tags to define the head and body. 3. CSS controls the look and positioning of HTML elements. It can be added internally or linked externally. CSS rules use selectors, declarations, and properties to style elements. 4. Additional HTML elements cover links, images, and lists. Links use anchor tags and attributes like href. Images also use tags. Lists come in ordered, unordered, and definition styles.

Uploaded by

SDE CSC MAVELIKARA
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

Throughout this course I'm going to be using a code editor called sublime text

What is HTML and CSS?

 The architect is html ---  what's in our Web page


 the designer is CSS --- describe this style and position of those things in our Web
 Builder is the web browser – build our webpage
 html and css – are both languages
BASIC ELEMENTS

5.Headings

 when we're working on our Web page by editing the file in a code editor we call it a document
 when we then preview the document in a web browser we call it a web page
 process of using html to describe what we have in our document is called marking up.
 <h1> -- heading start
 </h1> -- heading end

6.Paragraphs

 <p> -- paragraph start


 </p1> -- paragraph end

7.Tags In Detail

 Every tag has the same triangular brackets with the name of the tag between them
 come in pairs
 The first tag is called the opening tide and the second tag is called the closing tag.
 All closing tags contain a forward slash.
 Everything between the opening tag and the closing tag is called the content.
 whole thing is called an element

8.Structure Tags

 everything between these tags html – use <html>


 first section contains information about the document called the head and the second section contains
information that will be displayed through the browser viewport called the body
 area within the browser that displays the web
 If the document doesn't contain a head or body section a browser displays everything in the document
 <head> - here we add title
o We place it just after the Html opening tag
o any other elements that we place inside the head element will be recognized by the browser as
information about the web page and it will not be displayed through the browser viewport
o inside head element we add title element – appear in the top of our browser

<html>

<head>

<tittle> noodle bar </tittle>

</head>

<body> </body>

</html>

9.HTML vs CSS

 The browser uses its own default to CSS document to style our HTML element if we don’t provide CSS

10.Review
BASIC CSS

11. Showcase CSS

 CSS controls the look and position of our html elements


 Html -- <p> Michael </p>
CSS – p{
Font-weight: bold;
Font-Color : red; }

Output Michael

12. Adding CSS

 We do this by introducing a html tag called Style which will contain our CSS settings. <Style>
 We place style tag in head

13. CSS Syntax

 First we select the element we want to style.


o This is called the selector.
 we put our style settings between an opening curly bracket and a closing curly bracket.
o This is called the style settings
  property followed by its value
o A property is an aspect of an element that we want to style.
o property and its value are separated by a colon
o property and value – called as declaration
 A declaration is followed by a semicolon to let the browser know that this is the end of this particular
declaration
 Whole thing is called rule

14. Review
MORE HTML ELEMENTS

15. More Headings

 there are six heading tags. H1 TO H6

16. Nesting

17. Indenting Your Code

18. Space

 <br>
 <br><br> - two line breaks
 (no closing tags)

19. Emphasis

 <em> </em> -- underlines element

20. Strong

 <strong> </strong> --- bolds

21. Quoting Parts Of Text

 <q></q>

22. Quoting Chunks Of Text

 <blockquote> </blockquote>

23. Review

Linking To Pages
24. Intro To Links

 Webpage contains multiple documents( web pages) that are linked together

25. The a Element

 To describe link we use <a>


 A element should be nexted inside <p> or <h> elements

26. All About Attributes

 we've described the html element as a “link” we need to describe the way it should link to
 we do this by introducing an attribute called <href>
 An attribute is something that gives us more information about an element.
 <a href =””>

27. The ID Attribute

<h1 id= “Top”> HELLO </h1>


Each id must be unique
<p><a href= ”#Top”> click here to go to top</a> </p>

28. Mini Review

29. Travelling Along Relative Paths

 .. two levels higher


 ../a/b.html

30. Linking To Pages

<p><a href= ”menu/menu.html”> click here to go to top</a> </p>

31. Links With Absolute Paths

 a relative path starts from where we are and uses the dot dash method to plot a path to where we want
to be.
 absolute path is a path that starts not from where we are but from the root folder and plot a path down
to the file we want.
 Absolute Path don't use any dots in the dot dash method

32. Mini Review

33. How The Internet Works

The Internet is made up of computers connected to each other and we are one of those computers
all documents. When we type the address of a website into our browser the browser sends a signal
over the wires to request a document from the computer that has it. Once our request reaches the
computer the computer says Yep I have that document. Here it is and sends it to us which gets
displayed as a web page through our browser.

34. How Web Addresses Work


  technical name for a web address is URL
 HTTP- fancy way of saying the method used to request our Web page
 WWW - our address is on the Internet

35. Travelling Along Folder Structures

 URL + Absolute path

36. Linking To Other Pages On The Internet

<p><a href= ”http://www.google.com”> click here to go to top </a></p>

37. Links In New Windows

<p><a href= http://www.google.com “ target =”_blank”> click here to go to top </a></p>

38. Combining Our Link Knowledge

39. Review
IMAGES

40. Intro Images

<image SRC= “images/Facebook.png” alt=”facebook icon”>

41. Linking Images

<a>< href = “http://www.facebook.com image SRC= “images/Facebook.png” alt=”facebook icon”></a>

42. Review

SHOPPING LISTS

43. Intro Lists

 3 types of list
 Unordered list
 ordered list which is for describing a list of items that have an order to them. <ol>
 number will appear

<ol>
<li> first bulletin </li>
<li> second bulletin </li> </ol> or

<li> first bulletin </li>


<li> second bulletin </li>
<ol>
<li> first sub bulletin </li>
<li> second sub bulletin </li> </ol>
<li> third bulletin </li>

 Definition list
<dl>
<dt> help </dt>
<dd> to give </dd>
<dt> start </dt>
<dd> to commence </dd>

Help
To give
Start
To commence

44. Review
MORE CSS

45. CSS Reminder

46. Grouping Selectors

h1,h2
{color : dimgrey}

47. What Is Inheritance?

We simply applied once to the parent element and all the nested elements. The children will inherit it.

Body
{color : dimgrey}

48. What Is Cascading?

49. Internal vs External

50. Linking To External

51. All About Classes

You might also like