Hi there–this is my first post to this site. I will probably do only one site in my entire life–one for myself. I took some programming courses in college many moons ago and I am now reading my first book on HTML/CSS by Ian Lloyd. Design is not an issue–I already know exactly how I want the pages to look–my interest is in learning how to do the programming to make the design a workable website. I have only finished the first couple chapters of Lloyd’s book but I have perused the index and am not seeing what I think I may need. So…I need some direction on how to find a particular topic. Here’s my question: As far as style is concerned I would like to put some scroll type borders at the bottom corner of the pages–this is just for looks–I have seen them on other pages but don’t know where they came from/what they are. Are they clip art? Does HTML/CSS utilize clip art? Lloyd’s book gets into “images” which looks as though it’s limited to photographic images. How do I deal with putting in little clip art images gleaned from clip art sites? If it’s not done with clip art how is it done? If not clip art, where do I find images of decorative borders that are meant to work in HTML/CSS? Thank you very much, in advance.
A related question is that I want to create a simple logo for the header of my site pages. The logo I want is simple–consisting merely of the business name in a particular font–with some very traditional looking decorative squilly loopy lines on either side of the name to sort of set it off visually. The question is: I have the squiggly line I have seen on another website–do you have a guess at where they got the squiggly line–clip art?; part of a font set?; hand drawn (although I don’t think so–does not look hand drawn; it’s an old fashioned decorative/lithographic thing. Thanks again for any help.
With decorative images, you can either make them yourself (in a program like Photoshop or Illustrator) or find them from somewhere else. If you find images from somewhere else (i.e. done by someone else) you need to be careful about copyright. I’ve never heard of clipart used on a website (it’s something I only used in Word about 20 years ago). Not sure if you are allowed to use it on the web or not. There are lots of sites on the web that offer images for free, and there are also sites that sell images of all kinds that you can use (for a small price). If you Google “stock images” you will find a lot of options.
An example of a stock images site is istockphoto.com. Here is a list of some free image sites that I’ve seen:
For real control, you want a program like Photoshop so that you can edit, crop, modify and save images for the web. (Save for Web is an important function. You want web images to be as small as possible, with all unnecessary data stripped out.)
I’m not sure how best to advise you on scroll type borders since it’s hard for me to understand what you’re referring to without seeing an example, but I can give you advice on text and search engine optimization (how easily google and other websites can find your site).
Have you searched for a free font you could use that has squiggly lines incorporated into the font? Fonts are the style that text is displayed it. Some examples of fonts you might know are Times New Roman and Comic Sans. From the standpoint of a professional designer, I’d recommend that you find a more unique font to use for your logo than those examples. I’m not sure what you’re looking for when it comes to squiggly lines, but it sounds like a font with squiggles would work for you from what I could understand. If you decide to download a font to use for a commercial purpose, make sure the font is free to use. Some fonts have licensing restrictions and you would need to pay to use them. You would need to download a font and install it onto your computer in order to use it.
One more thing you should know about fonts, especially when doing web design is that there are only a few fonts that are web safe. A web safe font is a font that is installed on all or nearly all computers. When viewing a website, your browser will only be able to display fonts that are installed on your computer unless the text is an image instead of actual type on the page. Since not all fonts are installed by default on all computers, not every font can be displayed on every computer. If you want to use a fancy font for part of your website, you could either A) use an image or B) code your website in html5 and css3. html5 and css3 are new web standards still in development that are not widely supported on all browsers and might not be covered in your coding book. Css3 allows the coder to embed a font into the website. Only use this technique if the font you’re using is freeware with no licensing restrictions or you will run into legal issues. This method is much more complicated than displaying the font as an image. This technique is not easy for a beginner unless you’re very good at picking up code methods quickly. There is a book by Sitepoint on html5 and css3 that goes into this technique in more detail.
One more thing you should know about text on a website is that search engines cannot read images. They can only read text. This means that if you display a word as an image instead of actual text in the code, search engines will not pick up that word as a keyword. For this reason, it’s advisable not to display ALL your text on the site as an image unless you don’t mind the fact that your website will be difficult to find on a search engine. If you want good search engine optimization, use an H1 tag for the heading of a page if the heading is important to the content. There are 6 types of H tags. H1 will display text in the largest size, H2 in the second largest, and so on. H1 also has the most impact on a search engine. H1 tags will be noticed first and given higher priority by search engines than H2 tags. H2 tags will be given more attention than H3 tags and so on. You can change the size and appearance of various H tags with css. Don’t put all of the text in your website in H1 tags. Just use regular paragraph tags for content that is not a heading or important intro on the first line of text.
Yea you’re right. There are other ways to do it. I guess I’m just so used to using the methods I mentioned that I momentarily forgot about the other ways.
I know my question is ridiculously basic–but I really learned a lot from these responses. I have no plans to be a pro at this–I’m building my own website from scratch just because I can. I went to the library, sorta scratching my head and thinking…“huh, I wonder how websites are made”. I browsed the shelves and found books on Dreamweaver, etc., and started thinking it wouldn’t make sense for me to spend a bunch of money to do one website that relatively few people are ever going to see anyway. Then I sat down in the library and google searched the subject and found template software and then found there was a program already installed on my mac for making websites. I did not like the look of the web pages generated by templates and whatnot. I wanted a personalized, unique look to my pages. Then I found Ian Lloyd’s book on doing it from scratch. Then I signed up for this site and started reading and posting. I was like a kid with a brand new toy!
Learning this is turning out to be a wonderful journey which is greatly enhanced by this “subculture” of people here on this site. I’m really inspired by the generosity of you people taking the time to help others to simply learn a new skill. How could I have ever imagined that my DYI project would become a group effort? Good times. Thank you very much.
Heh heh, you’ve pretty well described how I started out a few years ago. Yes, it’s a really fun journey, and worth leaning it yourself if you have the inclination, but it is actually quite easy to build a website.
Yea I want to be a professional web designer and developer too because I like making websites. It’s actually pretty fun. I like doing both custom graphic design and coding.
