Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) - Programming - Nairaland
Nairaland Forum / Science/Technology / Programming / Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) (2101 Views)
Create A Classic Snake Game Using HTML5 And Jquery / Do You Think You Have Learn Html And Css???...no You Haven't. / How To Create Custom Audio Media Player With HTML5 And Jquery (2) (3) (4)
| Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by RealLordZeus(m): 5:33am On Aug 19, 2016 |
Introduction to Web Designing Hi Pals, welcome to Shadownet course for Web Design. This tutorial assumes that you have absolutely no knowledge of designing web pages Throughout this course you will learn the fundamentals of Web Design (what I mean is that you are not using a graphics template) so if you are lazy or not interested in learning programming, I will advise you to jump off the ship now or let me say( O dabo). It is not very difficult to create a website from scratch. You will need to code but don’t panic! HTML looks complicated, , its hard at first, but once you get the feel of it, it’s not that difficult. After all, there are billions of pages on the internet, designed by the whole spectrum of humanity: children, adults, pensioners, people from all walks of life have sites out there. And if they can do it, so can you. In fact, follow the lessons carefully and you WILL do it. Before long, you'll have your own pages designed and ready to be uploaded, there for all the world to see. By the end of the book, you will have acquired a good understanding of what web design is all about, and have the ability to take it further, if you so wish. The technologies you will learn are HTML, HTML5, and Cascading Style Sheets. (HTML5 is the newest version of the of the language.)At the heart of every web page is something called HTML. You will learn what this is, and how to code it. You will also learn the newest version of HTML, which is called HTML5. Both versions are included in this course. As well as HTML, you will learn about Cascading Style Sheets, and will be able to improve the look of your web pages by adding CSS to enhance them. REQUIREMENT The only thing you really need to do the course is a simple text editor i:e notepad and the likes visit http://shadownet.com.ng for pictorial illustrations meanwhile sit tight and wait for the next update |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by chukwuebuka077: 11:52am On Aug 19, 2016 |
I am interested |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by RealLordZeus(m): 3:45pm On Aug 19, 2016 |
To start writing web pages, we'll use a simple text editor. There are professional web editors that allow you create a website visually without coding HTML tags manually. Popular ones include Adobe Dreamweaver and Coffee Cup HTML Editor. However I still insist that you stay away from this Design Softwares, That way, you'll be able to focus on the code, without getting distracted by the menus and buttons of a complex piece of Web Design software. If you use Windows, then Notepad is an excellent text editor to use. To launch it, click on your Start menu in the bottom left of your screen. Click on All Programs, then Accessories. From the Accessories folder, select Notepad  As i mention earlier, I'm assuming you don't have previous knowledge) Another good piece of software is the free Notepad++, it displays the code in a colored form, making it easier to read and understand . it is free but has to be downloaded (Like a friend of mine would say …. Google is your friend). But being the archaic type, I will stick to my old notepad. Mac and Linux users have a number of text editors available, but finding a free one that is as good as Notepad++ is quite difficult. Bluefish is OK, but looks a bit dated, especially for HTML |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by RealLordZeus(m): 3:49pm On Aug 19, 2016 |
HTML is written in something called tags. HTML Tags are keywords in angular brackets < >Tags come in pairs, an opening one and a closing one. The first pair of tags we'll write are the HTML tags themselves. You put one HTML tag at the top, and one at the bottom: <HTML> </HTML> This tells a browser like Internet Explorer or Firefox that the code is HyperText Markup Language. Two things to notice here. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML. All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page. So add those two tags to your text editor and it will look like this: Notepad showing HTML tags The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and, again, your web page can really be messed up. The next pair of tags are the HEAD tags: It contains elements that describes the contents of the web page. All elements nested between the and tags are NOT visible in the webpage displayed by the browser to the viewer. Instead, they are used by search engines for indexing the page. They go between the two HTML ones: <HTML> <HEAD> </HEAD> </HTML> Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>. The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words 'Hello World' on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because 'Hello World' is direct text, and not a special instruction that the browser can understand. A special instruction your browser can understand is the TITLE tag, This element signifies the title of the document. The title of the document is what is visible in the upper properties bar of the browser. It is what appears as the documents title when the page is bookmarked. This is also an important tag in SEO <TITLE> </TITLE> The Title tag always goes in the HEAD section of the HTML skeleton. Notepad showing HTML HEAD and TITLE The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your browser window. And that's it, that's all it does. (You'll see what it looks like in a moment.) The final, and most important part, of the HTML skeleton is the BODY section. Notepad showing HTML BODY tags In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags. In your text editor, then, add the following: <html> <head> <title>my first page </title> </head> <body> Welcome to my first page </body> </html> Notice that we've added some text between the two TITLE tags: My First Page . We've also used indenting, but this is only for readability: the indenting doesn't have any effect on the results. DOCTYPE One special tag is DOCTYPE. It's not really a HTML tag, but an instruction to the browser about which version of HTML is allowed. As stated in an earlier post HTML comes in different versions, so you have to specify the version you’re writing in if not your page shall be rendered in quick mode. In version of HTML prior to HTML 5 the DOCTYPE could be very messy. In HTML 5, however, it's just this: <!DOCTYPE HTML> Other versions are: HTML 4.01 < !DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 4.01 Transitional//EN’’ “http://www.w3.org/TR/html4/loose.dtd” > XHTML 1.0 <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN’’ “http://www.w3.org/TR/html4/loose.dtd”> Note: Though HTML 5 doesn’t work with most old browsers, but I stick to it sha any way DOCTYPE needs to go at the very top of the page. There is no end tag for DOCTYPE.the Note the exclamation mark after the first angle bracket, and the space between DOCTYPE and HTML. So add a DOCTYPE to the top of your page. Your text editor will look something like this: <!Doctype html> <html> <head> <title>my first page </title> </head> <body> Welcome to my first page </body> </html> Coming up next, we'll take a look at how to save your web pages. |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by RealLordZeus(m): 1:53am On Aug 20, 2016 |
visit http://shadownet.com.ng for more tutorials on h4cking |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by RealLordZeus(m): 1:56pm On Aug 23, 2016 |
Web pages have their own file extensions. Oddly there are two different extensions, a three letter file extension and a four letter extension. Web pages come with the extension .htm or .html. A browser can recognise either extension. When you open up a web page with your browser, Internet Explorer for example, the browser software checks the file extension, the same check that Word and Excel make. If it sees the .htm or .html extension it knows it's a web page and then tries to open it. (Modern browsers, though, can open up other types of files. Internet Explorer can open up your Word documents and PDF files.) Behind the scenes, however, the thing that Internet Explorer is trying to open is really a text file that has had its extension changed from .txt to .htm. To save your code as a web page, click the File menu at the top of Notepad (or whatever Text Editor you are using.) From the File menu, select Save As. The Save As dialogue box appears (We created a new folder to store all our web pages in, and called the folder HTML).. Note the default extension at the bottom, under 'Save as type' It says, Text Documents (*.txt). If you leave it on that then you won't have web page, you'll have a text file. Click on the drop down list and change it to 'All files'. (You don't need to do this if you're using TextEdit on a Mac. Just type firstwebpage.html in the Save As box.) In the File Name box, type firstwebpage.html The All Files option on the Save As Note that we've used all lowercase letters. This is not strictly necessary, but is recommended. Also, try not to add spaces to web page names as this can cause problems. You can use underscores or hyphens, though. So these two are OK: first_web_page.html first-web-page.html But these two should be avoided: first web page.html FirstWebPage.html Click on Save and you'll have a HTML page that can be displayed in a browser. In the next lesson, you'll see how to Launch your web pages. |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by RealLordZeus(m): 1:59pm On Aug 23, 2016 |
Launching your web pages To view the results, open up an explorer window. In Windows, this is done by holding down the Windows keys and then pressing the letter E on your keyboard. Or click your Start menu in the bottom left, and then click on Computer. On a Mac, click the Finder icon in the Dock. Navigate to where you saved your HTML page. If yours has .txt on the end instead of .html then try again because it's not a web page but a text document. Double click your HTML file and it will launch in your default browser. For us, this is Firefox. Yours might be Internet Explorer or Safari. You should see a blank white page with your TITLE at the top. |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by RealLordZeus(m): 2:02pm On Aug 23, 2016 |
Always visit http://shadownet.com.ng for tutorials on h4cking, pen testing, programming and lots more |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by paragon40(m): 4:39pm On Aug 24, 2016 |
RealLordZeus:good tut and site. |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by RealLordZeus(m): 5:45pm On Aug 24, 2016 |
paragon40:Thanks bro |
| Re: Learn HTML, HTML5 And CSS In The Most Easiest Way ( Beginners - Intermediate) by clickate: 12:50pm On May 29, 2022 |
(1) (Reply)
New Cool: Javascript Css Selector "yapinator" Faster Than Sizzle: Peppy: Etc / Image Processing Using Handel-c / Why Ur Game Development Failed
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 36 |