Jump to content

Lsmjudoka

Members
  • Content count

    2
  • Joined

  • Last visited

Community Reputation

0 Neutral

4 Followers

About Lsmjudoka

  1. Basic Html+Css Tutorial

    Whoa, I forgot about this for a bit D: Added some more, starting a basic website. Note: This isn't by any means the best or most full-featured tutorial out there. But what I do try to do is give you a basic understanding of how making a webpage works so that it's easy to just learn new tags.
  2. You don't live in concord as in California, do you? O.o

  3. Before I start, I want to point out that there are many nice WYSIWYG editors and pre-made templates on sites like webs.com, so if you just want to make a webpage, you don't NEED to know HTML. Okay? Now, if you want to learn what's going on "behind the scenes", so to speak, or you want more control, or you want to eventually learn a scripting language like PHP, then you do need to know HTML. What is HTML? Hyper Text Markup Language is a set of "tags" used to control how text, images, and other content are displayed on a webpage. What is CSS? Cascading Style Sheets are used in combination with HTML to control the style of a webpage; the colors, text size and style, and alignment of various objects. Enough of this crap, I wanna make my page already D: Alright, there's just a couple things you need to get started with: Every HTML "tag" is enclosed in brackets, like so: <html> Additionally, every HTML tag must be "closed". For instance, if you want to designate a section of text as the title of your webpage, you would say: <title>My webpage</title> The closing slash indicates to the browser that you're done designating what should be the title. A sample webpage: <html> <head> <title>My webpage</title> </head> <body> This is the body, where you put all the text to be displayed! </body> </html> Starting the webpage At this point I recommend you start trying this out yourself. It's quite easy: Open up Notepad(or your text editor of choice), copy/paste the above in, and save it as "homepage.html". Then you can open it to view how it looks using your browser(File -> Open or similar). Now, once you have that down, we can get into the basics. To make a sample webpage containing, say, information about local restaurants, we'll need some basic ways to organize the text into nice things like lists, tables, paragraphs, etc. This is commonly done half with about 30% HTML and 70% CSS, but for now we'll keep it simple and stick to HTML. Take the code we had before, and change the title to "Tom's Restaurant Info Page". Now, the title in the <title> tag isn't actually displayed on the page: It's shown on the top bar of the browser. To display it on the page, we can use the <h1> tag inside the body, like so: <body> <h1>Tom's Restaurant info page</h1> ...(main text here) </body> The h1 tag stands for header, and there are five: h1-h5. They display text in a large and bold format. h1 is the largest, h2 is smaller, and h5 is the smallest. Now we can add some text to the page, then save it and take a look. Text in an HTML website is somewhat funny though: If you add more than one space, or multiple lines, they get ignored. For instance: Would be displayed like this: To stop this, HTML offers a few tags. The basic way to display text is using the paragraph, or <p> tag. <p>This is some text. It will be separated from the text below it...</p> This is a bunch of other text, separated from the text above it. Another way to create new lines is using the <br /> tag. For instance: This is one line...<br /> This will be another line... This line will be attached to the one above it because there's no br tag Let's put all that together and add an intro statement to the page. Add this code after the <h1> header... <p>Welcome to Tom's Restaurant info page! Here you can find information on all types of local restaurants.</p> <p>Here are some examples of information you can expect to find:<br /> Menus<br /> Hours<br /> Locations<br /> Reviews<br /> </p> Your code should now look like this: <html> <head> <title>Tom's Restaurant Info Page</title> </head> <body> <h1>Tom's Restaurant info page</h1> <p>Welcome to Tom's Restaurant info page! Here you can find information on all types of local restaurants.</p> <p>Here are some examples of information you can expect to find:<br /> Menus<br /> Hours<br /> Locations<br /> Reviews<br /> </p> </body> </html> Save it and open it through your browser. It should appear something like this: w3schools.com(More HTML how-to)
×