Create a Text Sample Web Page

Create a Text Sample Web Page


hi this is ralph and in this video i want to go over how we can create a simple webpage that demonstrates different samples of text font sizes font families and perhaps some color combinations. so I’ve got my visual studio code open and I’ve got a blank file here so i’m gonna go ahead and create a really quick web page there we go so I’ve got my doctype definition, HTML tag with language attribute, head section with meta charset and a title and i’m going to be using a set of internal styles (also called embedded styles) within the head section and then I’ve got a body and closing HTML so for this page i really just want to have some passages of text and doesn’t matter what kind of passages that i use but i would enclose each of these passages in a paragraph tag so that I’ve got some stuff to work with and some editors (let me just this real quick) ah here we go so it does work here let me control Z to undo so in the vs code here and this is also feature and sublime text if you use that one but on some of them you can put in some filler text lorem ipsum so I typed the word lorem and press my tab key and it’s going to give me a string of of basically filler text which is very popular with web developers graphic designers desktop publishers and things like that i would like to get some word wrap on here so let me going to turn on word wrap alt Z so now I’ve got a little bit of a text and if I wrap this in a paragraph i can go and copy and paste this and have several paragraphs i’m going to before I do that though inside my opening paragraph tag i’ll go ahead and put in ID equals para 1 and so that I can have several examples copy this paste paste paste paste paste i don’t know how many i did let’s see so i’ll have paragraph to paragraph 3 paragraph four five and six ok so I’m going to have six paragraphs on this page go ahead and say that I’m just saving my desktop here let me go ahead and pop this up in my browser I’m using chrome and so we can see these are the default looks of my paragraphs of text so back over the code editor i can now start to change things about these paragraphs and i’m going to actually change all of them at first so my first rule i’m going to change all of my paragraphs and i’m gonna go ahead and set a thin border i’ll just do like three pixels solid gray just so there’s something to visualize there i’m going to go ahead and set their widths to be about 400 pixels and I’m going to do the font now I’ll do the font size later i’ll do the font size different for different ones so just by making this little change here this is going to allow me to kind of visualize all right these are my five paragraphs. I’ll zoom in just a shade for six paragraphs now I can just start to decide how I want these paragraphs to look so i can start to style paragraph para one a little differently than all the others so for my paragraph 1 i’m going to go ahead and set the font family and you notice in my little screen tips when it pops up it looks like i want to write font family i can just press my tab right there and it’ll finish it off for me i’m going to go ahead and do a font family i’m going to use verdana i think i’ll do a Verdana and a font size of 14 points I’d like to see some comparisons and then while I’m here I can paste paste and i can go ahead and do a font style rule for paragraph 2 and paragraph 3 and out of curiosity we knock this down to 12 points and 10 points to save that jump back over to my browser and refresh and now I have kind of a more and actually let me change my zoom to a hundred percent so kind of how would text appear to your visitor who’s reading content on your page which one is easiest for you I’m kind of okay with the 12, but the 14 is pretty nice and bold in addition to changing font sizes of course there are things we can do about things like line-height so if my line height was let’s say 1.2 see what that does for a second little bit closer together what if I want to get a little further apart maybe a little bit too far apart so there’s all kinds of experimentations you can do with controlling font sizes of course some of my fonts are still in the default times but I can change font family i can change font size i can change line-height you can also change some colors let me do an experiment on my paragraph to where the background color is let’s say I’m going to do a red background this is going to be pretty ugly here and i’ll do a foreground color which will be my text color i think i’ll do my text color is a shade of gray that’s a shade of gray let’s see what we get here that’s pretty rough so we can start to tell by mixing different colors that gray on a dark red background is not a very reader-friendly color combination but what if I changed my background to a light shade of gray and my text color was a very dark red perhaps now it’s getting a little bit more palatable so font sizes font families line-heights color combinations you always want to think about the reader’s point of view when they’re looking at your web page so that means you want to use styles that are going to give you those best results don’t you can’t choose from every color because there’s only certain colors that would look best you can’t choose from every font size there’s only certain font size that would look best limit your choices go for simple functional readable before looking fancy or cool

Daniel Ostrander

Related Posts

8 thoughts on “Create a Text Sample Web Page

  1. mer8771 says:

    I'm so glad to see you back! We have missed you.

  2. Peristilo peris says:

    Love your videos!

  3. Kwisatsoundman says:

    Glad to hear you again!!! Always nice to experiment with the font settings, especially at the begining of each new project, when we have to setup base rules for the respective sizes of our heading and paragraph tags.

  4. MyPortfolio Max says:

    Welcome back, Ralph. Glad to know that you are OK. It's been a long time. ))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))))

  5. James dordoy says:

    Ralph :O

  6. syed golam says:

    Glad for got new video from you Ralph.

  7. Adrienne Warden says:

    So happy to have you back Mr. Phillips…Not sure if I ever thanked you for your wonderful channel…I've learned so much from your videos…I still come back an review…All the best to you. Another wonderful, practical and timeless video. You make web development fun!

  8. James G says:

    Enjoy your videos and explanations Ralph thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *