archive-am.com » AM » H » HTML.AM

Total: 543

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • Open Link in New Window
    into that same window Probably easier to show you an example Try clicking on the first link below then go back and click on the second link You ll see that when you click on the second link it loads into the same window that the first link loaded into Source Code Result p a href http www createawebsite cc web hosting target external Web hosting a Link opens in new window p p a href http www createawebsite cc database target external Database a Link opens in the same window that the previous link loaded into p Web hosting Link opens in new window Database Link opens in the same window that the previous link loaded into As you can see I created a name for the new window called external I only called it this to give it some sort of meaning i e external for external links I could have called it anything say Bob Mary or even Harold You don t have to stop at one named window you could create two or more Having said this try to remember your users As a website visitor it can be annoying if too many different windows are opening up Frames Named windows are perfect for loading a link into a frame For example if you have an iframe you could open the contents of a link into the iframe and the link doesn t need to be within the iframe itself Example Source Code Result p a href http www zappyhost com target embedded Search for a domain name a Link opens in iframe p iframe name embedded src width 500 height 650 scrolling auto frameborder 1 This bit is only viewed by browsers that don t support inline frames Your browser doesn t support inline frames

    Original URL path: http://www.html.am/html-codes/links/open-link-in-new-window.cfm (2016-02-17)
    Open archived version from archive

  • Remove Underline from Link
    instead of removing it For example you might be working with links that have had their underline removed by a global style sheet but your page pages require the links to be underlined To add an underline to a link or any other text for that matter you simply change the none to underline like this text decoration underline Here s an example of overriding a non underlined hyperlink with an underline In this case all hyperlinks within the div element have had their underline removed however the second hyperlink overrides the rule and adds an underline back in Source Code Result style scoped no underline a text decoration none style div class no underline p a href http www html am html codes links Normal link underline removed a p p a style text decoration underline href http www html am html codes links Underline restored a p div Normal link underline removed Underline restored Hover Effects You can use CSS to achieve a hover over effect where the styles change whenever the user hovers over an element You can also change the styles when someone clicks on the element and even when an element has focus Check out CSS Hover for these and other effects Usability of Removing Underlines This technique is often used for menu items and header and footer links However the technique should be used cautiously so as not to confuse the user Before you remove underlines from all links ask yourself the question Now that I ve removed the underline from this link is it possible that users might not even realize that this is a hyperlink While some items might not pose any issue for example menu items due to their placement links within the body text might especially if their color blends

    Original URL path: http://www.html.am/html-codes/links/remove-underline-from-link.cfm (2016-02-17)
    Open archived version from archive

  • CSS Hover
    Hover Click You can also specify properties for when the user clicks the link This is achieved by using the active pseudo class Example Source Code Result style scoped example3 hover color orange example3 active text decoration none font size 200 font weight bold style p class example3 Normal paragraph text p Normal paragraph text Other Pseudo Classes Other pseudo classes include link for unvisited links visited for visited links and focus for any element that currently has focus Example Source Code Result style scoped example4 a link color darkgreen example4 a visited color lightgreen example4 input focus background color orange outline 5px solid black font size 200 style div class example4 p a href http www html am html codes links css hover cfm A link to this page a i e already visited p p a href http www secureserver net hosting web hosting 4 aspx prog id zappyhost isc h 1 A link to a page you ve probably never visited a p input type text value Click me A link to this page i e already visited A link to a page you ve probably never visited Ordering Pseudo Classes Careful attention needs to be paid to the order in which you place your pseudo classes If you use link visited hover and active pseudo classes you should place them in that order Otherwise the cascading effect of one pseudo class may hide any effect that you re trying to achieve with a previous pseudo class For example if you place hover before the link pseudo class the link pseudo class will override your hover pseudo class So again as long as you place your pseudo classes in the following order you will be fine a link a visited a hover a active How Not To

    Original URL path: http://www.html.am/html-codes/links/css-hover.cfm (2016-02-17)
    Open archived version from archive

  • Image Codes
    a web page using the img tag When you use this tag you insert the image URL You should also provide other details such as width height and alternative text Alternative text is the text that is displayed in the event that your image can t be displayed This can be very helpful for blind users who need to use a screenreader to view websites It is also useful in the event that someone views your website with images disabled in their web browser Here s an example of embedding an image into a web page using the img tag Source Code Result img src http www html am images image codes milford sound t jpg width 225 height 151 alt Photo of Milford Sound in New Zealand Image Borders You can add a border to your image by using the CSS border property You can specify the width style and color of the border For example border 1px solid black would create a border that s one pixel wide solid and black in color Here s an example of an image border Source Code Result img style border 10px solid black src http www html am images image codes milford sound t jpg width 225 height 151 alt Photo of Milford Sound in New Zealand Also see our HTML Image Borders page for more image border codes Background Images Another way to add an image to a web page is to add the image as a background image Linked Images You can also have linked images on your web page These are images that when clicked on open another web page or URL To create a linked image see our HTML Links page HTML Tutorial HTML Templates HTML Codes Text Code Table Code Link Code Image Code Background Image

    Original URL path: http://www.html.am/html-codes/image-codes/ (2016-02-17)
    Open archived version from archive

  • Background Image Code
    div element to be larger than the background image The background image is 225 pixels wide and 151 pixels high Let s make the parent container i e the div 300 pixels wide and 200 pixels high Source Code Result div style background image url http www html am images image codes milford sound t jpg width 300px height 200px color black font size 18px This text appears in front of a repeating background image div This text appears in front of a repeating background image Background Pattern Here s another example this time using an image that s more suitable for being repeated Here s the image on it s own without being repeated This image is 137 pixels wide and 129 pixels high Now let s use it as the background of an element that s 300 pixels wide by 200 pixels high Source Code Result div style background image url http www html am images backgrounds background image 2 gif width 300px height 200px color black font size 18px border 1px solid ccc padding 5px This text appears in front of a repeating background image div This text appears in front of a repeating background image How Do I Stop It Repeating Many times you might prefer that the image doesn t repeat Perhaps you only want it to appear once as a background image Easy To stop your background image from repeating you can use the background repeat property along with the background position Alternatively you can just use the background property to set all your background properties at once Source Code Result div style background url http www html am images backgrounds background image 3 gif center center no repeat width 300px height 200px color black font size 18px border 1px solid ccc padding 5px

    Original URL path: http://www.html.am/html-codes/image-codes/background-image-code.cfm (2016-02-17)
    Open archived version from archive

  • HTML Image Borders
    images image codes milford sound t jpg width 225 height 151 alt Photo of Milford Sound in New Zealand Source Code Result img style border 5px groove gold src http www html am images image codes milford sound t jpg width 225 height 151 alt Photo of Milford Sound in New Zealand Source Code Result img style border 5px double black src http www html am images image codes milford sound t jpg width 225 height 151 alt Photo of Milford Sound in New Zealand Variations of Image Borders You can create different variations of your HTML image borders if you like For example you could have a different style of border on each side of your image Or you could have a different width or color on different sides You could also choose to only have a border on one side Be creative CSS provides four properties for defining border properties for each side of your image These are border top border right border bottom and border left Below are some examples of these types of variations Source Code Result img style border top 2px solid black border right 5px double black border bottom 10px solid black border left 20px solid black src http www html am images image codes milford sound t jpg width 225 height 151 alt Photo of Milford Sound in New Zealand Source Code Result img style border top 20px solid black border right 1px solid black border bottom 20px solid black border left 1px solid black src http www html am images image codes milford sound t jpg width 225 height 151 alt Photo of Milford Sound in New Zealand You can also combine the border property with the other properties For example you can set the border properties of all sides using border

    Original URL path: http://www.html.am/html-codes/image-codes/html-image-borders.cfm (2016-02-17)
    Open archived version from archive

  • Repeat Image
    You can prevent your background image from repeating by using background repeat no repeat Example Source Code Result div style background image url http www html am images backgrounds background image 2 gif background repeat no repeat width 400px height 400px border 1px solid black padding 10px p This text is displayed in front of the repeating image That s because it s a a href http www html am html codes image codes background image code cfm background image a as opposed to a normal image that has been defined using normal a href http www html am html codes image codes image code a p div This text is displayed in front of the repeating image That s because it s a background image as opposed to a normal image that has been defined using normal image code Using the background Property It s usually more efficient to use the background property to define your background images This property is shorthand for writing all your background related properties In this example we acheive the same effect as the above example but with less code Source Code Result div style background url http www html am images backgrounds background image 2 gif repeat y width 400px height 400px border 1px solid black padding 10px p This text is displayed in front of the repeating image That s because it s a a href http www html am html codes image codes background image code cfm background image a as opposed to a normal image that has been defined using normal a href http www html am html codes image codes image code a p div This text is displayed in front of the repeating image That s because it s a background image as opposed to a normal image that has been defined using normal image code Positioning your Repeating Background Image You can define where your repeating background image is positioned Example Source Code Result div style background url http www html am images backgrounds background image 2 gif 0px 100px repeat x width 400px height 400px border 1px solid black padding 10px p This text is displayed in front of the repeating image That s because it s a a href http www html am html codes image codes background image code cfm background image a as opposed to a normal image that has been defined using normal a href http www html am html codes image codes image code a p div This text is displayed in front of the repeating image That s because it s a background image as opposed to a normal image that has been defined using normal image code Repeating Embedded Images This is not a common thing but just in case you want to do it I ve added an example below Technically you can tile repeat embedded images Embedded images are the ones that are defined using the HTML img tag as opposed to the CSS background image or

    Original URL path: http://www.html.am/html-codes/image-codes/repeat-image.cfm (2016-02-17)
    Open archived version from archive

  • HTML Favicon Code
    in the website s root directory most browsers will automatically display it Having said that you can also add some HTML code to your website to ensure that browsers know which favicon to use Here s an example of the code you can use Place it inside the head element replace the image location with the location of the image to be used link rel shortcut icon href http example com favicon ico Note that if you use this code you can name the favicon anything you like Also although this example uses the ico extension you could use other image formats such as png gif jpeg and even animated GIFs However the ico format has had wide acceptance from browsers for quite some time and is a common format when using favicons Favicons can be 16x16 32x32 48x48 or 64x64 pixels in size and 8 bit 24 bit or 32 bit in color depth Apple iOS Home Screen Icons Apple devices with the iOS operating system version 1 1 3 or later such as the iPod Touch iPhone and iPad support the ability for you to provide a custom icon to be displayed on users Home screen when they use the Web Clip feature called Add to Home Screen within Mobile Safari Some Android devices also support this feature To provide an icon for this purpose upload the icon to the server then add the following code with the HTML of the website inside the head element replace the image location with the location of the image to be used link rel apple touch icon href http example com images apple touch icon png iOS will add rounded corners and a reflective shine to your iOS home screen icon If you prefer it without the reflective shine use the

    Original URL path: http://www.html.am/html-codes/image-codes/html-favicon-code.cfm (2016-02-17)
    Open archived version from archive



  •