1. This forum is in read-only mode.

Making a Website using a Notepad?

Discussion in 'Computers & Modding' started by meganova, Jul 18, 2009.

Page 1 of 2
  1. meganova

    meganova Well-Known Member

    Hello,
    It was an assignment.and..
    Can someone teach me how to do it?and fast.. :)
     
    meganova, Jul 18, 2009
    #1
  2. krazyyaj

    krazyyaj Well-Known Member

    i did it on wordpad.

    <title> name that appears at the top </title>
    <body> body message </body>
    it goes on and on. html is a bit hard at first.

    theres a site that tells you different html codes.
    w3 school or something like that.
     
    krazyyaj, Jul 18, 2009
    #2
  3. meganova

    meganova Well-Known Member

    I know about it already,
    I mean I need other codes than that...please.. :)
     
    meganova, Jul 18, 2009
    #3
  4. dracky w

    dracky w Well-Known Member

    Ha it reminds me of the old days before dreamweaver
    and any questions are welcome

    * <A></A> This element is what the hyperlinked structure of the World Wide Web is based on. It is used in two ways:
    1. Create a hyperlink to another anchor (Link to another page or website)
    2. Create an anchor in a document See working example. or see anchor tutorial

    * <ABBR></ABBR> Identifies that the content is an abbreviated form of some kind.

    * <ACRONYM></ACRONYM> Identifies that some text is an acronym.

    * <ADDRESS></ADDRESS> Specifies information such as authorship and contact details for the current document. Browsers should render the content with paragraph-breaks before and after.
    See working example

    * <APPLET></APPLET> Embed a Java applet into your website document.

    * <AREA></AREA> Used to implement a client-side image map.

    * <AUDIOSCOPE> This element displays the audioscope, the graphical display of the amplitude of the current sound over time.

    * <B></B> Change your website text to bold. See working example.
    <bold></bold> or <strong></strong> can also be used.

    * <BASE> Supply a base address that must be used for resolving relative URI's to absolute URI's.

    * <BASEFONT> Change the appearance of the default font that is used to draw the text.

    * <BDO></BDO> This element overrides the bidirectional algorithm, the default algorithm to resolve the direction to show the text.

    * <BGSOUND> Play a background sound when your webpage is opened. This element must be placed in the HEAD section of the document
    .
    * <BIG></BIG> Increase the current size of the font by 1. The maximum size is 7.

    * <BLACKFACE></BLACKFACE> This element will render the text in a double-weight boldface font.

    * <BLINK></BLINK> Changes the text to blinking. Drives people insane. *smiles*

    * <BLOCKQUOTE></BLOCKQUOTE> This is used to enclose larger quotations from other works in the page. See working example.

    * <BODY></BODY> This element contains the body of your website document. If a <HEAD> section is present in the page then the body must be placed after this section.

    * <BQ></BQ> This element is an alias of the blockquote element.

    *
    Line Break. Break the current line and continue on the next line.

    * <BUTTON></BUTTON> This attribute creates a button that the user can push.

    * <CAPTION></CAPTION> Specify the caption of a table. This element is only valid inside the TABLE element.

    * <CENTER></CENTER> Centers everything inside the opening and closing element.
    This tag is equivalent to <DIV align="center">. See working example

    * <CITE></CITE> Used for citations or references to other sources. See working example

    * <CODE></CODE> Used for source code examples.

    * <COL> This element sets the attribute values for one or more columns.

    * <COLGROUP> This tag creates a column group and sets attribute values for all the columns in this group.

    * <COMMENT></COMMENT> Used to insert comments in the HTML source which will be ignored by the browser. All HTML elements inside the comment will be ignored. You can use this code to put comments in your pages, which can help you when you have to edit the source later.
    HTML generating programs sometimes store program-specific information inside comments,
    so they will not be visible, but still available to the program.
    This code is not a container, but inside it you can put one or more comments,
    by surrounding with "--". The end of the code is indicated with the sequence -->.

    * <DD></DD> The description of a term in a definition list.

    * <DEL></DEL> This is a tag that is used to indicate webpage text that has been deleted.

    * <DFN></DFN> This is a element that is used to indicate a word or phrase that is being defined.

    * <DIR></DIR> Create a directory list. See working example.

    * <DIV></DIV> HTML DIV tags. This element is a general container for a part of the contents of a page. Through the DIV element you can add attributes, like style information, to this whole division. The DIV element will not show anything when used without any other attribute. A division will terminate a paragraph opened with the P element.
    <DIV align="center"> is the same as the deprecated <CENTER> element.

    * <DL></DL> Create a definition list. This is a list where each item consists of two parts.

    * <EM></EM> Put "emphasis" on the enclosed text.

    * <EMBED></EMBED> The EMBED element lets you display output from a plug-in application in an HTML document.

    * <FIELDSET></FIELDSET> Group a set of related controls in a form together. See working example

    * <FONT></FONT> HTML font tags change the font which is used to draw the text. See working example

    * <FORM></FORM> HTML form tags. Create a form inside a document. See working example

    * <FRAME> In a page with frames, this element defines how the a specific frame looks and what is initially shown inside the frame, when the framed page is loaded.
    This element is only allowed inside a FRAMESET element. Frames tutorial

    * <FRAMESET></FRAMESET> Container for creating a document that consists of several frames. Frames tutorial

    * <H1></H1> The elements H1, H2, H3, H4, H5 and H6 are used to create several levels of headers, with H1 as the most important header and H6 as the least important. See working example

    * <HEAD></HEAD> Container for elements describing the current document. This section contains no contents the browser should display in the body of the text.
    The following elements are allowed inside the HEAD section :

    BASE
    BASEFONT
    BGSOUND
    ISINDEX
    LINK
    META
    SCRIPT
    STYLE
    TITLE

    * <HR> Draw a horizontal rule. See working example

    * <HTML></HTML> The container for a complete HTML document.

    * <I></I> Change the text to italic. See working example.
    <italic></italic> can also be used.

    * <IFRAME></IFRAME> This element is a container to create an inline or floating frame. A floating frame is a frame in which the contents of another HTML document can be seen.

    * <ILAYER></ILAYER> With this element you can create several layers of content on a page. These layers can be stacked on top of each other, showing parts of underlying layers through non-occupied space.

    * <IMG> HTML image tag. Place an image in the document. See working Example

    * <INPUT> Create a control for a form. A control is an element which the user can use to enter data, like textboxes, radiobuttons and checkboxes and is only valid inside the FORM element.

    * <ISINDEX> This element will show an text input field. After pressing the <Enter> key the browser will construct a new URL, with the current address, a question mark and the text the user entered in the text field, and send it to the server

    * <KBD></KBD> This is used to identify text that a user is supposed to enter.

    * <LABEL></LABEL> Attach information to a specific field of a form.

    * <LAYER></LAYER> With this element you can create several layers of content on a page. These layers can be stacked on top of each other, showing parts of underlying layers through non-occupied space.

    * <LEGEND></LEGEND> Give the caption for a group of related controls, created with the FIELDSET element. See working example

    * <LI></LI>List tags Identify an item in a list. See working example.

    * <MAP></MAP> This element is a container for the map that is used in a client-side image map.

    * <MARQUEE></MARQUEE> HTML marquee tag. This element is a container that enables you to create a scrolling text marquee. See working example

    * <MENU></MENU> A container for a list of menu items.

    * <META> This element supplies meta-information about the current document.

    * <NOBR></NOBR> The NOBR element stands for NO BReak. This means all the text between the start and end of the NOBR elements cannot have line breaks inserted between them.

    * <NOEMBED></NOEMBED> This element defines content within EMBED content that is to be ignored by browsers that can activate the EMBED plug-in application.

    * <NOFRAMES></NOFRAMES> This element provides a way to create alternative content that is intended for browsers that can't show frames, or are configured not to show them. A browser that displays the frames ignores the contents of the NOFRAMES element.

    * <OBJECT></OBJECT> The object element allows the author to embed an object into the document. This element also replaces the APPLET element.

    * <OPTION></OPTION> This describes an option in a listbox of a form. See working example

    * <P></P> This indicates a paragraph in the document. It is a container but most browsers allow you to omit the closing element.

    * <PARAM> This element is for supplying parameters to a JAVA applet or another object and is only valid inside the APPLET and OBJECT elements.

    * <PLAINTEXT></PLAINTEXT> All HTML elements inside this container are ignored by the browser, and shown as they were only text.

    * <PRE></PRE> This element allows you to show preformatted text as it is, using the supplied whitespace of the text.

    * <Q></Q> This is used to enclose short quotations from other works in the page.

    * <S></S> Render text as strikethrough. See working example.

    * <SAMP></SAMP> This element describes text that is output from a program.

    * <SCRIPT></SCRIPT> This element adds the possibility of programming inside a HTML document by using a scripting language.

    * <SELECT></SELECT> This element lets you create a listbox as an input field on a form.
    See working example.

    * <SERVER></SERVER> This element is used to write JavaScripts that will be executed on the server, in the process of serving the page to the browser.

    * <SMALL></SMALL> Draw the text using a smaller font than the one that is used for normal text.

    * <SPACER> With a spacer you can control the horizontal whitespace that appears between words in a line, the vertical whitespace that appears between lines on a page, or set up rectangular spacing elements.

    * <SPAN></SPAN> This element is used to create a structure in a document. By using this element you can give a part of the document a name, or apply style sheet information to the part.
    See Working Example

    * <STRIKE></STRIKE> Render text as strikethrough. Same as the <S> tag.

    * <STRONG></STRONG> Render the text with strong emphasis. See working example

    * <STYLE></STYLE> This element is a container for style sheet elements to use with this document.

    * <SUB></SUB> This is a container for text that should be displayed as a subscript, and, if practical, using a smaller font (compared with normal text). See working example.

    * <SUP></SUP> Display the text as a superscript. See working example

    * <TABLE></TABLE>
    HTML table tags. Create a table layout which can contain cells in rows and columns. The cells of a table are specified with the TR, TH and TD elements.

    * <TBODY></TBODY>
    This element defines the body part of a table.

    * <TD></TD>
    HTML table tags. The container for a cell in a table. Inside this you can put all the HTML coding
    you want to appear in the cell.

    * <TEXTAREA></TEXTAREA>
    Define a multiline text field in a form. This element is only valid inside the FORM element.

    * <TFOOT></TFOOT>
    This element defines the footer of a table.

    * <TITLE></TITLE>
    Specify the title of the HTML document. This element is only allowed inside the HEAD element.

    * <TR></TR>
    Define a row inside a table.

    * <U></U>
    Underline your text.

    * <UL></UL>
    Create an unordered list of items, where unordered means the individual items are not numbered, but have a bullet in front of them. If you want numbered items use an ordered list. The items in the list are identified with the LI element.
    See working example

    * <VAR></VAR>
    Used to describe a metasyntactic variable, where the user is to replace the variable with a specific instance. Typically displayed in italics.

    * <WBR>
    The WBR element stands for Word Break.
     
    dracky w, Jul 18, 2009
    #4
  5. Loonylion

    Loonylion Administrator Staff Member

    All pages must start with <html> followed by <head> (on separate lines)

    In the <head> section, you have the <title> attribute. This is the text that goes in the browser title bar/the tab title. Then you must close the title attribute with </title> There are other tags that go in the <head> section, but you do not need to know them for this. Next, you must close the <head> section and open the body attribute. </head><body>

    In the <body> section, you place your content. There are a wide range of tags you can use, here are a few simple ones:

    <hn>header here</hn> where n is a number from 1 to 3. This is a header, it produces much larger and more attention grabbing text than normal. h1 is the biggest, h3 the smallest
    <p>text here</p> p is a paragraph. It produces normal sized text.
    <img src-"url or path to image" /> this allows you to add an image into your page

    This inserts a line break into your page.
    <hr /> this inserts a horizontal line into your page
    <a href="path or url to new page">link text</a> This inserts a link to a new page.
    <em>text</em> This makes your text italic
    <strong>text</strong> This makes your text bold
    <u>text</u> This underlines your text.
    <font color="#color">text</font> This changes the colour of the font. The colour should be specified by a hash symbol #, followed by a 6 character hexadecimal colour code. In some cases the words can work, eg <font color="blue"></font>, but it is not encouraged. Technically <font> should not be used anymore, but the alternative is too complex to learn on a deadline.

    these tags exist, but are highly annoying. Do not use them under any circumstances.
    <blink>text</blink>
    <marquee>text</marquee>

    Finally, you close the body section, </body> and then the page </html>.

    Tags must all be lower case. They can be nested, but if you do nest them, you must close them in reverse order to the order they were opened in, i.e last opened, first closed

    <p><strong><em><u>text</u></em></strong></p>

    White space in the source file is ignored (with the exception of single spaces) so you are not penalised for making the source file readable. Additionally, if you close a paragraph tag and then open another one </p><p>, there is an implied
    between them, so you do not need to insert one.

    Dracky W: a large number of those tags you have listed are depreciated and should no longer be used.
     
    Loonylion, Jul 18, 2009
    #5
  6. Born2killx

    Born2killx Well-Known Member

    His post is just copypasta from a website.
     
    Born2killx, Jul 18, 2009
    #6
  7. meganova

    meganova Well-Known Member

    ......That's confusing..
    maybe you could give an example each of the code??
     
    meganova, Jul 19, 2009
    #7
  8. nomercy

    nomercy Well-Known Member

    http://www.w3schools.com/html/default.asp - My source for when I want to do some html. For beginners up to experts.
     
    nomercy, Jul 19, 2009
    #8
  9. branraf

    branraf Well-Known Member

    If you wanna add a nice bit of consistency to the pages then don't forget to use CSS. That's all i could think of seeing as though Loony used most of what i know :-\ Well he's a networking legend anyway :D
     
    branraf, Jul 19, 2009
    #9
  10. Loonylion

    Loonylion Administrator Staff Member

    What I posted does not need CSS. While CSS is obviously the recommended way of doing things, it is too much to learn for a quick site made on a short deadline, especially when the person concerned doesn't even know basic HTML.
     
    Loonylion, Jul 19, 2009
    #10
  11. branraf

    branraf Well-Known Member

    Ohhhhh, i was under the impression he did ::) Silly me :D
     
    branraf, Jul 19, 2009
    #11
  12. The_Fox

    The_Fox Well-Known Member

    Simple, www.google.com

    then press CTRL + U and read through the source of everything, you'll get a better understanding of HTML. as for CSS, he doesn't need that yet, LOL.
     
    The_Fox, Jul 20, 2009
    #12
  13. Zendaril

    Zendaril New Member

    Google is a huge mess when looking at the code.
    http://www.yahoo.com or http://my.yahoo.com are nice and clean though.
     
    Zendaril, Jul 20, 2009
    #13
  14. meganova

    meganova Well-Known Member

    Thanks,but it's too confusing.. :(

    How do I color the background,and text...
    and...how to align the picture to the right/left?I know how to center it though...
     
    meganova, Jul 21, 2009
    #14
  15. The_Fox

    The_Fox Well-Known Member

    Yeah, true, I just felt like giving google, in fact the worst I've come across with poor coding, is myspace believe it or not.


    <HTML>
    <HEAD>
    </HEAD>
    <BODY>
    <P>Funny witty saying here! <FONT
    style="BACKGROUND-COLOR: yellow">REALLY? </FONT>yeah really!.</P>
    </BODY>
    </HTML>
    That should help with background colour.

    Allign left:

    <BODY>
    <P ALIGN="LEFT">
    This is on the LEFT
    </P>
    </BODY>

    Align right:

    <BODY>
    <P ALIGN="RIGHT">
    This is on the LEFT
    </P>
    </BODY>

    Now onto the whole background colour:

    <BODY BGCOLOR="Silver">
    <p>This should all be silver..</p>
    </BODY>

    And this is just the text colour:

    <BODY>
    <FONT COLOR="#0000FF">This will be blue, my man :)</FONT>
    </BODY>.

    I hope this has helped a little.

    HTML is like the gateway to hard languages, but you'll get there, people learn this stuff at different speeds, so if someones learns it in a few days, don't be disheartened, it just means they've rushed :p

    Best thing you can honestly do, is take it nice and slowly, and test things, don't be afriad to break it, you can always fix it :p
     
    The_Fox, Jul 21, 2009
    #15
  16. meganova

    meganova Well-Known Member

    about the color...
    Doesn't it have a different codes for each color?
     
    meganova, Jul 21, 2009
    #16
  17. anandjones

    anandjones Well-Known Member

    You use hexadecimal. You should be able to use some macros as well.
     
    anandjones, Jul 21, 2009
    #17
  18. meganova

    meganova Well-Known Member

    What is that?
     
    meganova, Jul 21, 2009
    #18
  19. Blade5406

    Blade5406 Well-Known Member

    Why are you coding w/o learning hexadecimal,binary, etc?
     
    Blade5406, Jul 21, 2009
    #19
  20. Loonylion

    Loonylion Administrator Staff Member

    Base 16 number system. Normal people count in base 10 (decimal), computers count in either binary or hexadecimal.

    Decimal: Hexadecimal:
    0 0
    1 1
    2 2
    3 3
    4 4
    5 5
    6 6
    7 7
    8 8
    9 9
    -----Decimal system ends here---------------
    10 A
    11 B
    12 C
    13 D
    14 E
    15 F
     
    Loonylion, Jul 21, 2009
    #20
Page 1 of 2