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
  68 

MeetingLogs/devweek1201/StartingWithHTMLandCSS (last edited 2012-02-02 09:33:00 by dholbach)