StartingWithHTMLandCSS
Dev Week -- Starting with HTML/CSS -- benonsoftware -- Wed, Feb 1st, 2012
1 [20:30] <benonsoftware> Hello and welcome to Starting with HTML/CSS
2 [20:31] <benonsoftware> If you have any questions at all perface them with QUESTION: You question here? in #ubuntu-classroom-chat
3 [20:31] <benonsoftware> Today I'll be teaching the basics of HTML and CSS and hopefully moving up
4 [20:32] <benonsoftware> Ok, first if you have a look at any webpage soruce by right clicking then selecting View Soruce
5 [20:32] <benonsoftware> It may look it bit scary at first but its easy to understand
6 [20:33] <benonsoftware> First all webpages should have a DOCTYPE at the start of it to tell you its a X/HTML 4.0/4.1/5 type of page
7 [20:34] <benonsoftware> Most newer websites are using <!DOCTYPE html> for their webpages as it is the HTML 5 doctype
8 [20:34] <benonsoftware> I would just like to note 2 things, 1. You can ask questions any time in #ubuntu-classroom-chat
9 [20:35] <benonsoftware> and 2. I am the website team leader for TouchLay and a website dev for SII
10 [20:35] <benonsoftware> Now after the <!DOCTYPE html> there should be <html>
11 [20:36] <benonsoftware> Now everything inside <html> or <p> is called a tag
12 [20:37] <benonsoftware> and all tags must be closed:
13 [20:37] <benonsoftware> Say if I have a <p> tag to close it (stop it) I would type </p>
14 [20:37] <ClassBot> ryan___ asked: Is the web page title inside <title> a tag?
15 [20:38] <benonsoftware> ryan__: Yes, inside <html> is a <head> which desribs the page and the tag <title> its in there
16 [20:38] <benonsoftware> So for example:
17 [20:38] <benonsoftware> <!DOCTYPE html>
18 [20:38] <benonsoftware> <html>
19 [20:38] <benonsoftware> <head>
20 [20:38] <benonsoftware> <title>Google</title>
21 [20:38] <benonsoftware> </head>
22 [20:39] <benonsoftware> Now inside the <head> tag is usally lots of things to help out with Search Engines and the like
23 [20:39] <benonsoftware> Lets move onto <body>
24 [20:40] <benonsoftware> Now the <body> tag is usally what everyone else sees on the page, so all of the text and images are inside here
25 [20:40] <benonsoftware> So usally after the start of <body> is usally the page heading inside the <h1> tag
26 [20:41] <benonsoftware> Now was the <hx> tag it can go up from <h1> to <h6> with <h1> being the biggest heading and <h6> being the smallest heading
27 [20:42] <ClassBot> ryan___ asked: Is the page background color/image also in <body>?
28 [20:43] <benonsoftware> ryan__: There is 3 ways, inside <body>, inside <head> (with CSS) and using a CSS style sheet
29 [20:44] <benonsoftware> I would just like to note that if I do not cover eveything here I am free for questions afterwards and I'll do another session at a later time
30 [20:44] <benonsoftware> Images:
31 [20:44] <benonsoftware> Now to inseart a image into a HTML file you do:
32 [20:44] <benonsoftware> <img alt=" " src="slice_0_0.jpg" style="width: 180px; height: 173px; border-width: 0px;"></td>
33 [20:45] <benonsoftware> Sorry, remove the final </td> tag as it will not work with just that :)
34 [20:45] <ClassBot> ryan___ asked: I may have a lot of questions, so instead of asking them here, do you have an email address I could email you at?
35 [20:46] <benonsoftware> ryan__: I sure do, anyone can contact me at benny @ ubuntu.com
36 [20:46] <benonsoftware> Now where <img alt=" " inside the " " you have to write a one or two words about the image in case of people using screen readers or cannot view the image
37 [20:47] <benonsoftware> and inside src="slice_0_0.jpg" you have to replace slice_0_0.jpg with your image name
38 [20:48] <benonsoftware> Usally people place their images inside a images sub folder so you would then do, images/image1.png for src=" "
39 [20:48] <benonsoftware> Now with <p>;
40 [20:49] <benonsoftware> <p> is where most people's content goes.
41 [20:49] <benonsoftware> So if I wanted to write Web dev is great! on a webpage I would use:
42 [20:49] <benonsoftware> <p>Web dev is great!</p>
43 [20:49] <benonsoftware> <p>
44 [20:50] <benonsoftware> means paragraph
45 [20:50] <ClassBot> There are 10 minutes remaining in the current session.
46 [20:50] <benonsoftware> So if you close it then open another <p> tag there would be a one line space inbetween
47 [20:51] <benonsoftware> But if you just want to start a new line then you would use:
48 [20:51] <benonsoftware> <br>
49 [20:51] <benonsoftware> or <br />
50 [20:51] <benonsoftware> Please note that the line break tags do NOT close
51 [20:52] <ClassBot> isgjevori asked: Do we have to close the <img> tag ?
52 [20:53] <benonsoftware> isgjevori: In the img tag example I showed you, you can see at the end of it the is ">, that closes it
53 [20:53] * benonsoftware is not talking about the </td> tag there
54 [20:53] <benonsoftware> palladin35y asked: What is CSS?
55 [20:54] <benonsoftware> palladin35y: CSS stands for Cascading Style Sheets and they help you desribe how your webpage should look with colours and the like
56 [20:54] <benonsoftware> I will if there is enough interest run a session on but CSS in a few weeks time
57 [20:55] <benonsoftware> With a few minutes left any questions?
58 [20:55] <ClassBot> There are 5 minutes remaining in the current session.
59 [20:57] <benonsoftware> Next session is Fixing small bugs in Unity with Trevinho and andyrock
60 [20:57] <ClassBot> isgjevori asked: Can we put tags like <img> or <blink> ect in a Css file?
61 [20:58] <benonsoftware> isgjevori: From what I have read no
62 [20:58] <ClassBot> fjrodriguez asked: What software do you use to create html pages?
63 [20:58] <ClassBot> nava asked: (please write some article of basic html and css and put it on web to others can download and learn fast) do u teach css 3 and html 5 in next weeks ?
64 [20:58] <benonsoftware> fjrodriguez: I just use any old notepad program and save the file as .html
65 [20:59] <benonsoftware> Page if you Google around there is some good What you see is what you get editors
66 [20:59] <benonsoftware> nava: Well I may in the next month or two but some things about CSS and HTML on my website at www.benonsoftware.com and I might teach about CSS in the next month too
67 [21:00] <benonsoftware> Also everything covered here in HTML5 too
MeetingLogs/devweek1201/StartingWithHTMLandCSS (last edited 2012-02-02 09:33:00 by dholbach)