I Want To Build Websites All By Myself - Programming (2) - Nairaland
Nairaland Forum / Science/Technology / Programming / I Want To Build Websites All By Myself (7335 Views)
Teach People To Build Websites And Apps And Earn Money / I Build Websites And Mobile Apps / Please Help, I Want To Learn To Build Websites, Web Design... (2) (3) (4)
(1) (2) (3) (4) (5) (Reply) (Go Down)
| Re: I Want To Build Websites All By Myself by eesyy(m): 2:44pm On Sep 05, 2020 |
*HTML –LINKS 2* *Linking to a Page Section* You can create a link to a particular section of a given webpage by using id attribute. This is a two-step process. First, id the section you want to go to when the link is clicked: <h1 id="news"> ... </h1> Second, create a link to the place where you want to reach within a webpage and id it using <a...> tag as follows: <a href="#news"> Click to scroll to news </a> On click of this link, the browser scrolls to the section of the page where that element with the news id is located on that same page. What if you intend to visit a particular section on a different page? Simple as well! For example the section in question is: <h2 id="notes"> ... </h2> and exists on an html page named blog.html on the same directory (i.e folder) as the h file you are working on, which carries your link text. Just do this on the link: <p> <a href="blog.html#notes"> Click to see notes </a> </p> This type of linking is referred to as BOOKMARKS. *Download Links* You can create text link to make your PDF, or DOC or ZIP files downloadable. This is very simple; you just need to give complete URL (web address) of the downloadable file as follows: <!DOCTYPE html> <html> <head> <title>Hyperlink Example</title> </head> <a href="http://www.gigabyteresources.com/files/page.pdf">Download PDF File</a> </body> </html> The URL above shows that the file to be downloaded on click of the link DOWNLOAD PDF FILE, is named page.pdf and located in a folder called files. That folder is on the same folder/directory as the file you are working on. *HTML – IMAGE LINKS* It is a cute practice among programmers to use image as links to and bookmarks even. The method is no much different from the usual. It's simple to use an image as hyperlink. We just need to use an image inside hyperlink at the place of text as shown below: <!DOCTYPE html> <html> <head> <title>Image Hyperlink Example</title> </head> <body> <p>Click following link</p> <a href="http://www.gigabyteresources.com" target="_self"> <img src="/images/logo.png" alt="Tutorials Point" border="0"/> </a> </body> </html> *HTML Email Tag* It is not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming problem for your email account. There are people, who can run programs to harvest these types of emails and later use them for spamming in various ways. You can have another option to facilitate people to send you emails. One option could be to use HTML forms to collect user data and then use PHP or CGI script to send an email. HTML <a> tag provides you option to specify an email address to send an email. While using <a> tag as an email tag, you will use mailto: email address along with href attribute. Following is the syntax of using mailto instead of using http. <a href=”mailto: abc@example.com”>Send Email</a> Now, if a user clicks this link, it launches one Email Client (like Lotus Notes, Outlook Express etc.) installed on your user's computer. There is another risk to use this option to send email because if user do not have email client installed on their computer then it would not be possible to send email. *Default Settings* You can specify a default email subject and email body along with your email address. Following is the example to use default subject and body. <a href=”mailto:abc@example.com?subjectFeedback&body=Message”> Send Feedback </a> Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 1:06pm On Sep 07, 2020 |
Hello all, a good day to you guys. I hope you have been doing some designing on your computer or phone as the case may be. Progress comes with practice guys ... Practice! |
| Re: I Want To Build Websites All By Myself by eesyy(m): 1:17pm On Sep 07, 2020 |
*HTML – FRAMES AND IFRAMES 1* HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns. *Disadvantages of Frames* There are few drawbacks with using frames, so it's never recommended to use frames in your webpages: 1) Some smaller devices cannot cope with frames often because their screen is not big enough to be divided up. 2) Sometimes your page will be displayed differently on different computers due to different screen resolution. 3) The browser's back button might not work as the user hopes. 4) There are still few browsers that do not support frame technology. *Creating Frames* To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset> tag defines, how to divide the window into frames. The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame. Example: Following is the example to create three horizontal frames: <!DOCTYPE html> <html> <head> <title>HTML Frames</title> </head> <frameset rows="10%,80%,10%"> <frame name="top" src="top_frame.html" /> <frame name="main" src="main_frame.html" /> <frame name="bottom" src="bottom_frame.html" /> <noframes> <body> Your browser does not support frames. </body> </noframes> </frameset> </html> Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 1:19pm On Sep 07, 2020 |
*HTML – FRAMES AND IFRAMES 2* _self: Loads the page into the current frame. _blank: Loads a page into a new browser window opening a new window. _parent: Loads the page into the parent window, which in the case of a single frameset is the main browser window. _top: Loads the page into the browser window, replacing any current frames. targetframe: Loads the page into a named targetframe. You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not somehow related to <frameset> tag, instead, it can appear anywhere in your document. The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. The src attribute is used to specify the URL of the document that occupies the inline frame. Example: Following is the example to show how to use the <iframe>: <!DOCTYPE html> <html> <head> <title>HTML Iframes</title> </head> <body> <p>Document content goes here...</p> <iframe src="table.html" width="555" height="200"> Sorry your browser does not support inline frames. </iframe> <p>Document content also go here...</p> </body> </html> Make sure there is an html document with the name table.html in the same directory/folder as this html document you are working on. Check the below uploaded picture. The <Iframe> Tag Attributes Most of the attributes of the <iframe> tag, including name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly like the corresponding attributes for the <frame> tag. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 4:48pm On Sep 07, 2020 |
*HTML – BLOCKS AND INLINE 1* All the HTML elements can be categorized into two categories (a) Block Level Elements (b) Inline Elements. *Block Elements* Block elements appear on the screen as if they have a line break before and after them. They will not allow any other element to fall on the same line beside them whether before or after. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that comes before or follows them appears on its own new line. *Inline Elements* Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements. *Grouping HTML Elements* There are two important tags which we use very frequently to group various other HTML tags: (i)<div> tag and (ii) <span> tag *The <div> tag* This is the very important block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define different parts (Left, Right, Top etc.) of the page using <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS. Example Following is a simple example of <div> tag. We will learn Cascading Style Sheet (CSS) in a separate chapter but we used it here to show the usage of <div> tag: <!DOCTYPE html> <html> <head> <title>HTML div Tag</title> </head> <body> <h1> Using The div Tag </h1> <!-- First group of tags --> <div style="color: red"> <h4>This is first group</h4> <p>Following is a list of vegetables</p> <ul> <li>Beetroot</li> <li>Ginger</li> <li>Potato</li> </ul> </div> <!-- Second group of tags --> <div style="color: green"> <h4>This is second group</h4> <p>Following is a list of fruits</p> <ul> <li>Apple</li> <li>Banana</li> <li>Mango</li> <li>Strawberry</li> </ul> </div> </body> </html> Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 8:53pm On Sep 07, 2020 |
*HTML – BLOCKS AND INLINE 2* *The <span> tag* The HTML <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS. The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements whereas the <div> tag is used with block-level elements. <!DOCTYPE html> <html> <head> <title>HTML span Tag</title> </head> <body> <h1> Using The span Tag </h1> <p>This is <span style="color: red; font-style: italic;">red</span> and this is <span style="color:green"> <i>green</i> </span></p> <span> Carry another span <span>element</span> </span> </body> </html> Notice the font-style property with value of italic, does the same to thing as the <i> tag: makes the text it is addressed to appear slant. So the <span> appear appears within another element (either inline or block), but can only nest (carry within itself) other inline elements or another <span> element or just text. Next I would like to show you something really interesting, but easy; a simple html tag that creates a marvelous effect you can 'wow' your pals with. Coming up... Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 12:25pm On Sep 08, 2020 |
*HTML - MARQUEE* The <marquee> is a quite interesting HTML tag. Why interesting? I say so because despite how simple it is, it serves a very awesome purpose - it creates somewhat like a special effect. That makes it simply awesome! I won't try to explain this effect, instead I'll go straight to writing an example; urge you to do same as I do here, then try different content, play around with it. You would definitely be tempted to. <!DOCTYPE html> <html> <head> <title>HTML span Tag</title> <style> h1, h2 { text-align: center; } </style> </head> <body> <h1> Using The marquee Tag </h1> <marquee> This element causes its content to scroll from right to left in a repeating cycle. </marquee> <br/><br/> <h1> CNN NEWS </h2> <marquee> You have seen something like this in news stations </marquee> <br/><br/> <h2> News headline </h2> <marquee> <img src="fy.jpg" alt="profile picture" style="width: 50px; height: 50px; border-radius: 50%;"> <i>Even other elements like the <img> and <i> can be used inside the marquee as you can see here. </marquee> </body> </html> That's the <marquee> tag, how it works, what it does. I can't possibly demonstrate this effect in a pic. So I'll use several. Turns out I can! Anything is possible. Awesome! Right? Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 8:16pm On Sep 09, 2020 |
*HTML – MARQUEES (continuation)* An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag. Note: The HTML <marquee> tag may not be supported by various browsers so it is not recommended to rely on this tag, instead you can use JavaScript and CSS to create such effects. <!DOCTYPE html> <html> <head> <title>HTML Marquee</title> </head> <body> <marquee>This is basic example of marquee</marquee> <br/><br/><br/><br/> <marquee width="50%">This example will take only 50% width</marquee> <br/><br/><br/><br/> <marquee direction="right">This text will scroll from left to right</marquee> <br/><br/><br/><br/> <marquee direction="up">This text will scroll from bottom to up</marquee> </body> </html> Following picture shows a list of important attributes which can be used with <marquee> tag. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 12:22am On Sep 10, 2020 |
*HTML – BACKGROUNDS 1* By default, your webpage background is white in color. You may not like it, but no worries. HTML provides you following two good ways to decorate your webpage background. 1) Html Background with Colors 2) Html Background with Images Now let's see both the approaches one by one using appropriate examples. *Html Background with Colors* The bgcolor attribute is used to control the background of an HTML element, specifically page body and table backgrounds. Following is the syntax to use bgcolor attribute with any HTML tag. Example Here are the examples to set background of an HTML tag: <!DOCTYPE html> <html> <head> <title>HTML Background Images</title> </head> <body> <!-- Format 1 - Use color name --> <table bgcolor="yellow" width="100%"> <tr> <td> This background is yellow </td> </tr> </table> <!-- Format 2 - Use hex value --> <table bgcolor="#6666FF" width="100%"> <tr> <td> This background is sky blue </td> </tr> </table> <!-- Format 3 - Use color value in RGB terms --> <table bgcolor="rgb(255,0,255)" width="100%"> <tr> <td> This background is green </td> </tr> </table> </body> </html> Check out the picture uploaded below. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 12:24am On Sep 10, 2020 |
*HTML – BACKGROUNDS 2* The background attribute can also be used to control the background of an HTML element, specifically page body and table backgrounds. You can specify an image to set background of your HTML page or table. Following is the syntax to use background attribute with any HTML tag. Note: The background attribute is deprecated and it is recommended to use Style Sheet for background setting. The most frequently used image formats are JPEG, GIF and PNG images. Example Here is the example to set background images of a table. <!DOCTYPE html> <html> <head> <title>HTML Background Images</title> </head> <body> <!-- Set table background --> <table background="/images/html.gif" width="100%" height="100"> <tr> <td> This background is filled up with HTML image. </td> </tr> </table> </body> </html> Check out the picture uploaded below. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 7:57am On Sep 10, 2020 |
*HTML – COLORS 1* Colors are very important to give a good look and feel to your website. You can specify colors on page level using <body> tag or you can set colors for individual tags using bgcolor attribute. The <body> tag has following attributes which can be used to set different colors: 1) bgcolor - sets a color for the background of the page. 2) text - sets a color for the body text. 3) alink - sets a color for active links or selected links. 4) link - sets a color for linked text. 5) vlink - sets a color for visited links - that is, for linked text that you have already clicked on. *HTML Color Coding Methods* There are following three different methods to set colors in your web page: 1) Color names - You can specify color names directly like green, blue or red. 2) Hex codes - A six-digit code representing the amount of red, green, and blue that makes up the color. 3) Color decimal or percentage values - This value is specified using the rgb() property. Now we will see these coloring schemes one by one. *HTML Colors - Color Names* You can specify direct a color name to set text or background color. W3C has listed 16 basic color names that will valid HTML validator but there are over 200 different color names supported by major browsers. Note: Check a complete list of HTML Color Name. *W3C Standard 16 Colors* The image uploaded below shows the list of W3C Standard 16 Colors names and it is recommended to use them. Remember W3C, right? World Wide Web Consortium. They are a governing body that serve the world wide web community establishing laws and setting guidelines. They provide a good number of colour names more than what you see below. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 8:38am On Sep 10, 2020 |
*HTML – COLORS 2* *HTML Colors - Hex Codes* A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent a red value, the next two are a green value (), and the last are the blue value (BB). A hexadecimal value can be taken from any graphics software like Corel draw, Adobe Photoshop, Paintshop Pro or MS Paint, or any colour picker application on desktop or phone. Each hexadecimal code will be preceded by a pound or hash sign #. Shown in the first uploaded image below is a list of few colors using hexadecimal notation. *HTML Colors - RGB Values* This color value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage. Note: Not all browsers support rgb() property of color so it is recommended not to use it so much.Shown in the second uploaded image below is a list to show few colors using RGB values. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 1:19pm On Sep 10, 2020 |
*HTML - COLORS 3* *Browser Safe Colors* Here is the list of 216 colors which are supposed to be safest and computer independent colors. These colors very from hexa code 000000 to FFFFFF and they will be supported by all the computers having 256 color palette. Example shown in pictures uploaded below. There are however certain advantages to using each of these colour indication patterns. That is another topic. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 2:10pm On Sep 11, 2020 |
*HTML - COLORS 4* The reason I'm extending our lesson of HTML COLORS is that your understanding of it provides you with some real advantages like creating colours of any shade, using colours without having to know or remember their names, determining intensity of colours, and manipulating the transparency/opacity of colours. *Colour Names* Colour names are limited in that there are not enough names to cover all the colours and shades that can be produced. The mixing of the primary colours - red, green, blue - in varying proportions, produces different shades of other colours. Names can not be given to each and every colour shade, there are only less-than-enough we are familiar with today. With the use of HEX and RGB VALUES, this disadvantage is removed. We do no have to know all the existing colour names in order to refer to them, and we can use mixes that exist without names. How does this work? Easy! Light is a spectrum with particles. The more the particles, the higher the intensity of the light. Science teaches us that everything in this world is made up of particles; small tiny particles in the smallest and simplest of forms and sizes. You can call them atoms. Taking this from our science lessons, light itself has small tiny particles that make up its rays. In simple terms, put enough light particles together, you will produce light of a certain colour depending on the colour-mix of particles. The three primary colours are mixed to produce all the others. When you give a full red, full green, and full blue, you will get white. So it works with light particles. Black is simply the absence of colour; no colour at all, no red, no green, no blue. This is where RGB and HEX get their mix paterns from. *HEX VALUE* The light intensity range is 0 to F, 0 being the least and F being the highest. That is we have: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. When you do #F00, you have given red full intensity and gave no blue nor green, that produces red colour. As you increase an colour from 0 upwards, the colour mixes. Same happens as you reduce from F. Try something yourself, and upload your result. *RGB VALUE* The same idea for HEX works for RGB, difference is the range is from 0 to 255; 0 the least, 255 the highest. rgb(0, 255, 0) produces green. However, there is one advantage in using HEX and one in using RGB. 1) HEX provides double the range of mixture that RGB provides. You double the values for each colour when using HEX. If you do #FF0000, it means FF for red, 00 for green and 00 for blue. 2) RGB provides another property: opacity. rgba(0, 255, 0, 0.5) will produce blue with 50% transparency. The 'a' property added to rgb provides the transparency, ranging from 0 to 1, 0 being full transparency while 1 being no transparency. We have 0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1. Note: Forgive me for my inconsistency with my spelling of the word 'colour'. Sometimes I use 'color', because it is American and American English is the language of development of WEB LANGUAGES, like the one we are currently learning: HTML. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by chingle5(m): 7:05pm On Sep 11, 2020 |
All this "I will teach you how to program on Nairaland" usually end in tears coz i dont think nairaland is a good platform for that quote me if i am wrong  |
| Re: I Want To Build Websites All By Myself by eesyy(m): 8:44pm On Sep 12, 2020 |
You are a beginner to web programming, you have duly followed this post up to this point, practised as you did, yet you have not found this post helpful. Please quote me, telling me why so. Thanks! Powered by Programmers Community... |
| Re: I Want To Build Websites All By Myself by eesyy(m): 8:45pm On Sep 12, 2020 |
*HTML – FONTS 1* Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font>tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color. The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag. Note: The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this lesson will explain font and basefont tags in detail. *Set Font Size* You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3. Fonts can also take numeric values of px, em, cm and % units. Example: . . . <body> <font size="1">Font size="1"</font><br /> <font size="2">Font size="2"</font><br /> <font size="3">Font size="3"</font><br /> <font size="4">Font size="4"</font><br /> <font size="5">Font size="5"</font><br /> <font size="6">Font size="6"</font><br /> <font size="7">Font size="7"</font> </body> . . . See the first image uploaded below... *Relative Font Size* You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size="+n"> or <font size="-n">. Example: . . . <body> <font size="-1">Font size="-1"</font><br /> <font size="+1">Font size="+1"</font><br /> <font size="+2">Font size="+2"</font><br /> <font size="+3">Font size="+3"</font> </body> . . . See the second image uploaded below... Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 10:12am On Sep 13, 2020 |
*HTML - FONTS 2* *Setting Font Face* You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user's computer. Example: . . . <body> <font face="Times New Roman" size="5">Times New Roman</font><br /> <font face="Verdana" size="5">Verdana</font><br /> <font face="Comic sans MS" size="5">Comic Sans MS</font><br /> <font face="WildWest" size="5">WildWest</font> </body> . . . See the first image uploaded below... *Specify alternate font faces* A visitor will only be able to see your font if they have that font installed on their computer. So, it is possible to specify two or more font face alternatives by listing the font face names, separated by a comma. Example: . . . <font face="arial,helvetica"> Test alternate fonts </font> . . . When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman. *Setting Font Color* You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color. Example: . . . <font color="#FF00FF">This text is in pink</font><br /> <font color="red">This text is red</font> . . . See the second image uploaded below... *The <basefont> Element* The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings. The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or -2 for two sizes smaller. Example: . . . <body> <basefont face="arial, verdana, sans-serif" size="2" color="#ff0000"> <p>This is the page's default font.</p> <h2>Example of the <basefont> Element</h2> <p><font size="+2" color="darkgray"> This is darkgray text with two sizes larger </font></p> <p><font face="courier" size="-1" color="#000000"> It is a courier font, a size smaller and black in color. </font></p> </body> . . . See the third image uploaded below... Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 5:13pm On Sep 13, 2020 |
*HTML – MULTIMEDIA* Multimedia on the web, is sound, music, videos, movies, and animations. Multimedia comes in many different formats. It can be almost anything you can hear or see. Examples include pictures, music, sound, videos, records, films, animations, and more. Web pages often contain multimedia elements of different types and formats. *Multimedia Formats* Multimedia elements (like sounds or videos) are stored in media files. The most common way to discover the type of a file, is to look at the file extension. When a browser sees the file extension .htm or .html, it will treat the file as an HTML file. The .xml extension indicates an XML file, and the .css extension indicates a style sheet file. Pictures are recognized by extensions like .gif, .png and .jpg. Multimedia files also have their own formats and different extensions like: .swf, .wav, .mp3, .mp4, .mpg, .wmv, and .avi. *Common Video Formats* They include MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MPEG-4 or MP4. Only MP4, WebM and Ogg video are supported by the newest HTML5 standard, their media types are respectively, video/mp4, video/webm and video/ogg. *Common Audio Formats* They include MIDI, RealAudio, WMA, AAC, WAV, Ogg, MP3, MP4 is the newest format for compressed recorded music. The term MP3 has become synonymous with digital music.If your website is about recorded music, MP3 is the choice. Only MP3, WAV, and Ogg audio are supported by the newest HTML5 standard, their media types are respectively, audio/mpeg, audio/wav and audio/ogg. *Playing Videos on Web* Before HTML5, there was no standard for showing videos on a web page. Before HTML5, videos could only be played with a plug-in (like flash). The HTML5 <video> element specifies a standard way to embed a video in a web page. To show a video in HTML, use the <video> element: . . . <video width=”320” height=”240” controls> <source src=”movie.mp4” type=”video/mp4”> <source src=”movie.ogg” type=”video/ogg”> Your browser does not support the video tag. </video> . . . The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the browser does not know the size of the video. The effect will be that the page will change (or flicker) while the video loads. Text between the <video> and </video> tags will only display in browsers that do not support the <video> element. Multiple <source> elements can link to different video files. The browser will use the first recognized format. To start a video automatically use the autoplay attribute: . . . <video width=”320” height=”240” autoplay> <source src=”movie.mp4” type=”video/mp4”> <source src=”movie.ogg” type=”video/ogg”> Your browser does not support the video tag. </video> . . . The autoplay attribute however, does not work in mobile devices like iPad and iPhone. *Playing Audios on Web* Before HTML5, there was no standard for playing audio files on a web page. Before HTML5, audio files could only be played with a plug-in (like flash). The HTML5 <audio> element specifies a standard way to embed audio in a web page. To play an audio file in HTML, use the <audio> element: . . . <audio controls> <source src=”horse.mp3” type=”audio/mpeg”> <source src=”horse.ogg” type=”audio/ogg”> Your browser does not support the audio tag. </audio> . . . The controls attribute adds audio controls, like play, pause, and volume. Text between the <audio> and </audio> tags will display in browsers that do not support the <audio> element. Multiple <source> elements can link to different audio files. The browser will use the first recognized format. The autoplay attribute also goes for audio as in video. HTML5 defines DOM methods, properties, and events for the <video> and <audio> elements. This allows you to load, play, and pause videos and audios, as well as setting duration and volume. There are also DOM events that can notify you when a video begins to play, is paused, etc. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 4:37pm On Sep 14, 2020 |
*HTML – FORMS 1* HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc. A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application. There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc. *Form Attributes* Apart from common attributes, following is a list of the most frequently used form attributes: action - This points to the Backend script ready to process your passed data. method - Method to be used to upload data. The most frequently used are GET and POST methods. target - Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc. enctype - You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are: 1) application/x-www-form-urlencoded - This is the standard method most forms use in simple scenarios. 2) mutlipart/form-data - This is used when you want to upload binary data in the form of files like image, word file etc. *HTML Form Controls* There are different types of form controls that you can use to collect data using HTML form: Text Input Controls Checkboxes Controls Radio Box Controls Select Box Controls File Select boxes Hidden Controls Clickable Buttons Submit and Reset Button Try this: <! DOCTYPE html> <html> <head> <title> Forms </title> </head> <body> <form action="form_process.php" method="POST"> <label> First name: </label> <input type="text"> <br/><br/> <label> Last name: </label> <input type="text"> <br/><br/> <label> Email: </label> <input type="email"> <br/><br/> <label> Sex: </label> <b> male </b> <input type="radio" name="sex"> <b> female </b> <input type="radio" name="sex"> <br/><br/> <textarea> Drop your comment here </textarea> <br/><br/> <input type="button" value="Submit form"> </form> </body> </html> Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 3:29pm On Sep 15, 2020 |
*HTML - FORMS 2* *Text Input Controls* There are three types of text input used on forms: Single-line text input controls - This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input>tag. Password input controls - This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input> tag but type attribute is set to password. Multi-line text input controls - This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea>tag. Following is the list of attributes for <textarea> tag. name - Used to give a name to the control which is sent to the server to be recognized and get the value. rows - Indicates the number of rows of text area box. cols - Indicates the number of columns of text area box. *Checkbox Control* Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox. *Radio Button Control* Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio. *Select Box Control* A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options. Example: <!DOCTYPE html> <html> <head> <title>Text Input Control</title> </head> <body> <form> <label>First name:</label> <input type="text" /> <br/><br/> <label>Last name:</label> <input type="text" /> <br/><br/> Description: <br /> <textarea rows="5" cols="50"> Enter description here... </textarea> <br/><br/> <input type="checkbox" name="subject" value="on">Maths <input type="checkbox" name="subject" value="on"> Physics <br/><br/> <input type="radio" name="options" value="maths">Maths <input type="radio" name="options" value="physics"> Physics <br/><br/> <select name="dropdown"> <option value="Maths" selected>Maths</option> <option value="Physics">Physics</option> <option value="Geography">Geography</option> <option value="Economics">Economics</option> </select>my </form> </body> </html> Note: You can not select both radio buttons: when one is selected, the other becomes unselected. As long as their carry the same name value, it works. It is however not the same with check boxes. Check boxes are meant to offer more than one selection if needed while radio buttons are used when one option is to be chosen out of many. Also, on click of the select button, there is a drop-down with options to be selected from. Before clicking it, an option has already been set as selected by default, using the 'select' attribute. Try placing the 'select' attribute in another option, see what changes. Powered by Programmers Community... 1 Share
|
| Re: I Want To Build Websites All By Myself by chingle5(m): 10:24pm On Sep 15, 2020 |
Makavelli come and learn here bt seriously i will not advice to spend much time coding on notepad an advance text editor will b beta |
| Re: I Want To Build Websites All By Myself by eesyy(m): 8:41am On Sep 18, 2020 |
To all followers of this Web Programming thread: For some reasons not yet known, it was not possible to send posts for Wednesday and Thursday on this platform, this message kept coming up at every trial: "You can not do that right now, try again in a few hours." However it seems to have been sorted out. Still, to be prepared is to consider the past, present and look into the future whilst planning. For this reason, a WHATSAPP group has been created for the same purpose as this thread: "to teach the practice of web coding in simple, understandable terms, provide essential programming skills relevant to the times and people, create a network of uniquely motivated, creative and skillful programmers with clear foresight and discipline." Below is the link, on click you will be taken to the group where lessons will be posted. Thank you so much. You are blessed to be a blessing ... Remember that! https:///HJevgHpwDYJ6oOSDn7WkCw Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by eesyy(m): 8:55am On Sep 18, 2020 |
*HTML - FORMS 3* *File Upload Box* If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file. *Button Controls* There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type attribute to button. Type values for button control include: submit - This creates a button that automatically submits a form. reset - This creates a button that automatically resets form controls to their initial values. button - This creates a button that is used to trigger a client-side script when the user clicks that button. image - This creates a clickable button but we can use an image as background of the button. *Hidden Form Controls* Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page. Example and result uploaded below. Some <form> attributes: accept - Specifies the types of files that the server accepts (applies to file upload box). accept-charset - Specifies the charset used in the submitted form (default: the page charset). action - Specifies an address (url) where to submit the form (default: the submitting page). autocomplete - Specifies if the browser should autocomplete the form (default: on). enctype - Specifies the encoding of the submitted data (default: is url-encoded). method - Specifies the HTTP method used when submitting the form (default: GET). name - Specifies a name used to identify the form (for DOM usage: document.forms.name). novalidate - Specifies that the browser should not validate the form. target - Specifies the target of the address in the action attribute (default: _self). No need to worry, you will get the handle of this soon. Powered by Programmers Community... 2 Shares
|
| Re: I Want To Build Websites All By Myself by geektechlife: 11:12pm On Sep 23, 2020 |
*HTML - FORMS 4* *HTML5 <datalist> Element* The <datalist> element specifies a list of pre-defined options for an <input> element. Users will see a drop-down list of pre-defined options as they input data. The list attribute of the <input> element, must refer to the id attribute of the <datalist> element. . . . <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> . . . *HTML5 Input Types* HTML5 added several new input types: color date datetime datetime-local month number range search tel time url week Example: . . . <form> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <br/> Birthday: <input type="date" name="bday"> <br/> Select your favorite color: <input type="color" name="favcolor"> <br/> E-mail: <input type="email" name="email"> <br/> Add your homepage: <input type="url" name="homepage"> </form> . . . Powered by Programmers Community... 2 Shares
|
Javascript In Pidgin!!! / Difference Between Computer Science And Computer Science Education / How To Remove Paint Virus From Pc
(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. 124 |