== Dev Week -- Starting with HTML/CSS -- benonsoftware -- Wed, Feb 1st, 2012 == {{{#!irc [20:30] Hello and welcome to Starting with HTML/CSS [20:31] If you have any questions at all perface them with QUESTION: You question here? in #ubuntu-classroom-chat [20:31] Today I'll be teaching the basics of HTML and CSS and hopefully moving up [20:32] Ok, first if you have a look at any webpage soruce by right clicking then selecting View Soruce [20:32] It may look it bit scary at first but its easy to understand [20:33] 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 [20:34] Most newer websites are using for their webpages as it is the HTML 5 doctype [20:34] I would just like to note 2 things, 1. You can ask questions any time in #ubuntu-classroom-chat [20:35] and 2. I am the website team leader for TouchLay and a website dev for SII [20:35] Now after the there should be [20:36] Now everything inside or

is called a tag [20:37] and all tags must be closed: [20:37] Say if I have a

tag to close it (stop it) I would type

[20:37] ryan___ asked: Is the web page title inside a tag? [20:38] <benonsoftware> ryan__: Yes, inside <html> is a <head> which desribs the page and the tag <title> its in there [20:38] <benonsoftware> So for example: [20:38] <benonsoftware> <!DOCTYPE html> [20:38] <benonsoftware> <html> [20:38] <benonsoftware> <head> [20:38] <benonsoftware> <title>Google [20:38] [20:39] Now inside the tag is usally lots of things to help out with Search Engines and the like [20:39] Lets move onto [20:40] Now the tag is usally what everyone else sees on the page, so all of the text and images are inside here [20:40] So usally after the start of is usally the page heading inside the

tag [20:41] Now was the tag it can go up from

to

with

being the biggest heading and

being the smallest heading [20:42] ryan___ asked: Is the page background color/image also in ? [20:43] ryan__: There is 3 ways, inside , inside (with CSS) and using a CSS style sheet [20:44] 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 [20:44] Images: [20:44] Now to inseart a image into a HTML file you do: [20:44]  [20:45] Sorry, remove the final tag as it will not work with just that :) [20:45] 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? [20:46] ryan__: I sure do, anyone can contact me at benny @ ubuntu.com [20:46] Now where  and inside src="slice_0_0.jpg" you have to replace slice_0_0.jpg with your image name [20:48] Usally people place their images inside a images sub folder so you would then do, images/image1.png for src=" " [20:48] Now with

; [20:49]

is where most people's content goes. [20:49] So if I wanted to write Web dev is great! on a webpage I would use: [20:49]

Web dev is great!

[20:49]

[20:50] means paragraph [20:50] There are 10 minutes remaining in the current session. [20:50] So if you close it then open another

tag there would be a one line space inbetween [20:51] But if you just want to start a new line then you would use: [20:51]
[20:51] or
[20:51] Please note that the line break tags do NOT close [20:52] isgjevori asked: Do we have to close the tag ? [20:53] isgjevori: In the img tag example I showed you, you can see at the end of it the is ">, that closes it [20:53] * benonsoftware is not talking about the tag there [20:53] palladin35y asked: What is CSS? [20:54] palladin35y: CSS stands for Cascading Style Sheets and they help you desribe how your webpage should look with colours and the like [20:54] I will if there is enough interest run a session on but CSS in a few weeks time [20:55] With a few minutes left any questions? [20:55] There are 5 minutes remaining in the current session. [20:57] Next session is Fixing small bugs in Unity with Trevinho and andyrock [20:57] isgjevori asked: Can we put tags like or ect in a Css file? [20:58] isgjevori: From what I have read no [20:58] fjrodriguez asked: What software do you use to create html pages? [20:58] 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 ? [20:58] fjrodriguez: I just use any old notepad program and save the file as .html [20:59] Page if you Google around there is some good What you see is what you get editors [20:59] 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 [21:00] Also everything covered here in HTML5 too }}}